// Customer branding — the single source for the console's identity surfaces.
//
// This console is deployed per customer, so the name and logo that appear on
// the sign-in screen, in the workspace switcher and on the browser tab come
// from `PARCLE_CONFIG.brand` (mapped to window.PARCLE_BRAND by index.html)
// instead of being hardcoded across files. Delete the `brand` block from
// config.js and every surface falls back to Parcle's own identity.
//
// Scope is deliberately the identity layer only: name, mark, tab title,
// attribution. Colors and fonts are NOT branded here — the console keeps its
// own design tokens (styles.css).
const PARCLE_BRAND_FALLBACK = Object.freeze({
configured: false,
name: 'Parcle',
domain: 'parcle.ai',
mark: 'parcle',
poweredBy: null,
});
// Normalized brand for render code. Always returns a complete object, so call
// sites never need null checks.
function parcleBrand() {
const b = (typeof window !== 'undefined' && window.PARCLE_BRAND) || null;
if (!b || typeof b !== 'object') return PARCLE_BRAND_FALLBACK;
return {
// True only when this deploy actually names a customer — `name` is what
// switches branding on, so a stray empty `brand: {}` doesn't rename the
// workspace after the vendor. Surfaces that name the *workspace* (rail,
// breadcrumb, onboarding) key off this so an unbranded deploy keeps the
// labels it had before branding existed.
configured: !!b.name,
name: b.name || PARCLE_BRAND_FALLBACK.name,
domain: b.domain || PARCLE_BRAND_FALLBACK.domain,
mark: b.mark || PARCLE_BRAND_FALLBACK.mark,
// Attribution line shown under the customer's name. `true` renders the
// default wording, a string overrides it, null/absent hides it entirely
// (which is what Parcle's own deploy wants — no "powered by itself").
poweredBy: b.poweredBy === true ? 'Powered by Parcle'
: (typeof b.poweredBy === 'string' && b.poweredBy ? b.poweredBy : null),
};
}
// Name for "the workspace this console is showing". A branded deploy names it
// after the customer; an unbranded one gets `fallback`, which is whatever that
// surface said before branding existed — so deleting the `brand` block from
// config.js restores the previous UI verbatim instead of relabelling every
// workspace "Parcle".
function parcleWorkspaceName(fallback) {
const b = parcleBrand();
return b.configured ? b.name : fallback;
}
// URL-safe form of the workspace name, for the places that need a host or path
// segment rather than a label (the setup guide's workspace URL, the demo
// connector drawer's tenant host). Keys off `configured` for the same reason
// parcleWorkspaceName does: unbranded, the vendor's own name must not stand in
// for the customer's tenant — `parcle.dev/parcle` would read as Parcle being
// the customer.
function parcleWorkspaceSlug() {
const b = parcleBrand();
if (!b.configured) return 'workspace';
return b.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'workspace';
}
// Mark registry. `chip: true` means the glyph is a thin stroke drawing meant
// to sit inside a filled tile; `chip: false` means the artwork is already a
// solid shape and must sit on the surface directly. `ink` lets a brand pin its
// own mark color when the call site's default would misrepresent it.
const BRAND_MARKS = {
// Parcle: arc + dot, drawn in the tile's foreground color.
parcle: {
chip: true,
render: ({ size, fg }) => (
),
},
// Mithra: a solid "M" letterform. It carries no tile of its own, so it must
// not be dropped into a filled one — a same-colored tile would swallow the
// glyph. Mithra publishes the mark white-on-dark; ink is pinned to
// --text-primary so it inverts with the app's theme instead. That is the
// console's OWN token, not Mithra's palette — near enough to their ironwood /
// pearl to read right, but branding stops at the identity layer and does not
// reach styles.css. (The favicon can't read app tokens, so that file hardcodes
// their real #271606 / #F7F8EC.) The artwork is not square (2400x2200); the
// default preserveAspectRatio letterboxes it in the square slot rather than
// stretching it.
mithra: {
chip: false,
ink: 'var(--text-primary)',
render: ({ size, fg }) => (
),
},
};
const _parcleWarnedMarks = {};
// The brand's logo at `size` px.
// ink — the mark's color (tile fill for chip marks, artwork fill otherwise)
// on — the color drawn on top of the tile; unused by non-chip marks
// A brand-declared `ink` wins, so a solid mark keeps its own color wherever it
// is placed.
function BrandMark({ size = 24, radius = 6, ink = 'var(--text-primary)', on = 'var(--bg)', style }) {
const key = parcleBrand().mark;
// A typo'd `mark` would otherwise silently ship the wrong logo — warn once so
// it surfaces in the console instead of on the customer's screen.
if (!BRAND_MARKS[key] && !_parcleWarnedMarks[key]) {
_parcleWarnedMarks[key] = true;
console.warn(`[brand] unknown mark "${key}" — falling back to the Parcle mark. Known marks: ${Object.keys(BRAND_MARKS).join(', ')}`);
}
const mark = BRAND_MARKS[key] || BRAND_MARKS.parcle;
const color = mark.ink || ink;
if (!mark.chip) {
return (
{mark.render({ size, fg: color })}
);
}
return (
{mark.render({ size: Math.round(size / 2), fg: on })}