Glossary ​

Terms you'll hear in meetings, PRs, and bug reports. Alphabetical.

Builder ​

The visual editor at admin.storeino.world/theme-builder/. A Vue 3 SPA where the merchant drags sections onto pages, edits their fields and styles, and saves. The "builder" is the app, not the theme.

config ​

The JSON document that defines a theme's content + appearance. Stored on the theme record under theme.config. Has four important keys for souk: templates, tokens, global, settings.

config.global ​

Holds the chrome rendered on every page: config.global.header, config.global.footer. Each is a single section instance, not an array.

config.templates ​

The per-page section lists. Keys: home, shop, product, cart, wishlist, blog, post, collections, collection, thanks, account, error, page. Each is an array of section instances.

config.tokens ​

A flat object of merchant-tunable design values: primary, accent, surface, fontHeading, radiusLg, etc. Becomes CSS variables on :root. See Tokens & Tailwind classes.

Customizer (legacy) ​

The old in-admin editor for non-souk themes (marketmall, argan, bazar). Not relevant for souk-theme work. If you hear "the Customizer" in a meeting, it's about a legacy theme.

Descendant selector ​

A useStyles mode where the generated CSS targets descendants instead of the element itself. Lets one style entry cover N repeating items (cards, list rows) without binding to each one. See Composables reference.

Element key / styleKey ​

A named scope inside a section that the merchant can recolor independently — like title, card, primaryCta. Declared in manifest.styleKeys, consumed by useStyles(key, ...) in the component.

iframe ​

The storefront preview the merchant sees inside the builder. It's a real iframe loading the merchant's actual storefront (e.g. https://fixpro.storeino.world/?builder=true&...). Patches flow from the builder to the iframe via postMessage.

Locale map ​

The storage shape for a translatable field: { en: "Sale", fr: "Soldes", ar: "تخفيضات" }. Always read via useT() — never index by language code directly.

Manifest ​

The manifest.json file in every section folder. Declares the section's title, icon, schema (editable fields), defaults, and styleKeys. The single source of truth for what the builder shows.

Manifest index ​

public/sections/manifest-index.json — a concatenated list of every section manifest. The builder fetches this once to populate its section library. Regenerated by npm run manifest (auto-invoked by dev/build).

Pages (templates) ​

The set of named templates the storefront supports: home, shop, product, cart, wishlist, blog, post, collections, collection, thanks, account, error, page. Each section's manifest.pages declares which it can be dropped on (use ["any"] for universal sections).

Patch ​

A single PATCH operation sent from the builder to the iframe via postMessage. Examples: set a value, insert a section, remove a section, move a section. The iframe applies the patch to its Pinia store and the storefront re-renders. You won't write patches yourself — the builder UI does.

Section instance ​

One placement of a section on a page, with its filled-in values. Stored in MongoDB as { id, type, values }. The page is just an array of instances.

Section type ​

The "class" of a section — the folder + manifest + Vue component. One per components/sections/<TypeName>/. Instances are derived from types.

souk-theme ​

The Nuxt 3 storefront codebase you're working on. The modern, builder-driven storefront. Sibling: legacy themes (marketmall, etc.) — different architecture, not relevant.

Storefront ​

The live, shopper-facing site at <subdomain>.storeino.world (or the merchant's custom domain). Renders souk-theme with the merchant's saved config.

Theme document ​

The MongoDB record (themes collection) that holds one merchant's theme: _id, storeId, name, isActive, and the giant config object. Edited by the builder, read by the storefront.

theme-manager ​

An Express proxy on port 7070 that fronts every storefront. Looks up the store by subdomain, mints a THEMES-source token, caches it for 120s, and forwards requests to the souk-theme Nuxt server on port 7000. You shouldn't need to touch it — but knowing it exists explains why the storefront has auth context.

Token ​

A merchant-tunable design value (color, font, radius, etc.) stored on config.tokens and emitted as a CSS variable (--token-<key>) on :root. Drives the Tailwind utility classes (bg-primary, text-ink, rounded-lg).

Translatable field ​

A schema field marked "translatable": true. The merchant can write a different value per locale. Stored as a locale map. Always read via useT().

useEditable ​

Composable that makes a text node click-to-edit when the storefront is in builder mode. Wraps the element in contenteditable and sends EDIT patches on blur. See Composables reference.

useStyles ​

Composable that takes a styleKey + the section's styles config and returns the CSS class + data-element-key attribute to bind. The mechanism by which merchant style edits land on the rendered element.

useT ​

Composable that resolves a translatable value to a string in the active language. Use on every translatable field.