@uplatform/brand 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+Code (dist/**/*.js, dist/**/*.d.ts) — MIT License
+
+Copyright (c) iyulab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or
+substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT
+OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Marks and brand assets (marks/**, media/**, patterns/**, and the mark data embedded in
+dist/generated) — not covered by the MIT License.
+U-Platform and the product names and marks are trademarks of iyulab. The marks, their renders and
+link-preview images (media/**) and the U outline pattern (patterns/**) may be used only to indicate
+that a product belongs to the U-Platform family, unmodified, as rendered by this package.
+The iyulab wordmark (marks/iyulab-wordmark*.svg) may be used only to attribute a U-Platform product
+to iyulab, such as a "made by" credit, unmodified and at least 100 px wide.

package/README.md

@@ -0,0 +1,68 @@
+# @uplatform/brand
+
+The U-Platform affiliation kit: the family product list, product marks, and two elements —
+`<uplatform-affiliation>`, which shows a product belongs to U-Platform and links to its siblings, and
+`<u-mark>`, a product mark that can draw itself in or loop as a loading indicator. For places that cannot
+run code it also ships mark renders (animated WebP, posters, link-preview images), the U outline pattern
+and the iyulab wordmark.
+
+It deliberately ships **no colors, fonts or spacing for your UI**. Each product keeps its own design;
+this kit only marks the affiliation.
+
+## Use
+
+```js
+import '@uplatform/brand' // registers <uplatform-affiliation> and <u-mark>
+```
+
+```html
+<uplatform-affiliation product="u-board" lang="en" theme="auto"></uplatform-affiliation>
+```
+
+| Attribute | Values | Default |
+|---|---|---|
+| `product` | your product id — it is left out of the sibling list | none (all products listed) |
+| `lang` | `ko` · `en` | `ko` |
+| `theme` | `auto` (follows `prefers-color-scheme`) · `light` · `dark` | `auto` |
+
+Data only (no element): `import { products, umbrella, productHref } from '@uplatform/brand/products'`.
+`productHref` returns the product's own site, or `undefined` when it has none — render plain text then.
+Mark files: `@uplatform/brand/marks/<id>.svg` and `<id>-reverse.svg` (for dark backgrounds).
+
+## Marks that move — `<u-mark>`
+
+```html
+<u-mark product="u-cmms" motion="reveal" play="visible"></u-mark>
+```
+
+| Attribute | Values | Default |
+|---|---|---|
+| `product` | a product id, or `u-platform` | `u-platform` |
+| `motion` | `reveal` (drawn in one stroke, then filled) · `chase` (loading) · `none` | `none` |
+| `play` | `load` · `visible` (plays once when half of it is on screen) | `load` |
+| `theme` | `auto` · `light` · `dark` | `auto` |
+
+Size it with CSS `width` (the height follows; default 64 px). Sizing by height alone is not supported.
+At 32 px or less the inner glyph is dropped.
+With `prefers-reduced-motion: reduce` it shows the finished mark and never animates.
+The mark is decorative; to name it, put `role="img"` and `aria-label` on the `<u-mark>` element itself.
+
+Files for places that cannot run code: `@uplatform/brand/media/motion/<id>-{reveal,chase}-{light,dark}.webp`
+(reveal plays once, chase loops), `<id>-reveal-{light,dark}-poster.png`, link previews `media/og/<id>.png` (1200×630),
+the outline pattern `patterns/u-outline.svg` (one color — tint it with CSS `mask`), and the iyulab wordmark
+`marks/iyulab-wordmark.svg` / `-reverse.svg` (keep it at least 100 px wide).
+
+## Placement rules
+
+- Put it in the footer, or in your menu's information area. Where exactly is your product's call.
+- Keep the mark at least 16 px and leave clear space around it equal to the mark's stroke weight.
+- To match your background, set `--uplatform-fg` and `--uplatform-bg` on the element.
+- For layout only (placement, spacing, sizing), the shadow parts are exposed: `::part(link)`, `::part(toggle)`
+  and `::part(list)`. Colors and type stay with the element — nothing else is themable on purpose.
+- It makes no network requests and sets no cookies; the product list is built into the package, so it
+  renders on networks without internet access (the links simply won't resolve there).
+
+## License
+
+Code: MIT. Marks, renders, the outline pattern and the iyulab wordmark: trademarks and brand assets
+of iyulab, with limited permitted use — see `LICENSE`.

package/dist/affiliation.d.ts

@@ -0,0 +1,8 @@
+export declare class UplatformAffiliation extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function defineAffiliation(registry?: CustomElementRegistry): void;

package/dist/affiliation.js

@@ -0,0 +1,117 @@
+// <uplatform-affiliation> — U-Platform 소속 표시. 의존 0 · 네트워크 0 · 쿠키 0 · shadow DOM.
+// 제품 UI 안에 놓이지만 그 UI 와 스타일이 서로 새지 않는다. 호스트는 --uplatform-fg · --uplatform-bg 로 대비만 맞춘다.
+import { products, umbrella, HUB } from './products.js';
+import { MARKS } from './generated/marks.js';
+const TEXT = {
+    ko: { toggle: 'U-Platform 제품', solutions: '업무 시스템', system: '시스템 통합', cross: '독립 제품' },
+    en: { toggle: 'U-Platform products', solutions: 'Business systems', system: 'System integration', cross: 'Standalone products' },
+};
+const esc = (s) => s.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+/** 마크 SVG 는 생성물(신뢰 원본)이다 — 장식이라 보조기술에서 숨긴다. */
+const mark = (id, theme) => (MARKS[id]?.[theme] ?? '').replace(/^<svg/, '<svg aria-hidden="true" focusable="false"');
+const STYLE = `
+:host { display: inline-block; font: inherit; color: var(--uplatform-fg, ${umbrella.ink.light}); position: relative; }
+:host([data-resolved-theme="dark"]) { color: var(--uplatform-fg, ${umbrella.ink.dark}); }
+.row { display: inline-flex; align-items: center; gap: 0.25rem; }
+a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
+a:hover { text-decoration: underline; }
+svg { width: 1.25rem; height: 1.25rem; flex: none; }
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0.15rem 0.3rem; cursor: pointer; border-radius: 0.25rem; }
+a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+[part="list"] { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + 0.4rem); min-width: 14rem;
+  background: var(--uplatform-bg, #fff); border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 0.5rem; padding: 0.5rem; z-index: 10; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
+:host([data-resolved-theme="dark"]) [part="list"] { background: var(--uplatform-bg, #1c1f24); }
+[part="list"][hidden] { display: none; }
+[role="group"] + [role="group"] { margin-top: 0.5rem; }
+.label { font-size: 0.75em; opacity: 0.7; margin: 0 0 0.25rem; }
+ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
+li a { padding: 0.25rem 0.35rem; border-radius: 0.25rem; }
+`;
+export class UplatformAffiliation extends HTMLElement {
+    static observedAttributes = ['product', 'lang', 'theme'];
+    #root = this.attachShadow({ mode: 'open' });
+    #mql;
+    #onDocClick = (e) => { if (!e.composedPath().includes(this))
+        this.#close(false); };
+    /** OS 테마가 바뀌면 다시 그린다 — 테마가 명시되지 않았을 때만(명시값은 OS 를 따르지 않는다). */
+    #onScheme = () => { const t = this.getAttribute('theme'); if (t !== 'light' && t !== 'dark')
+        this.#render(); };
+    /** 포커스가 엘리먼트 밖으로 나가면 닫는다(포커스는 되돌리지 않는다). relatedTarget 이 없으면(목록 여백 클릭 등) 닫지 않는다. */
+    #onFocusOut = (e) => {
+        const next = e.relatedTarget;
+        if (next && !this.contains(next) && !this.#root.contains(next))
+            this.#close(false);
+    };
+    connectedCallback() {
+        this.#render();
+        document.addEventListener('click', this.#onDocClick);
+        this.#root.addEventListener('focusout', this.#onFocusOut);
+        this.#mql = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        this.#mql?.addEventListener('change', this.#onScheme);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.#onDocClick);
+        this.#root.removeEventListener('focusout', this.#onFocusOut);
+        this.#mql?.removeEventListener('change', this.#onScheme);
+        this.#mql = undefined;
+    }
+    attributeChangedCallback() { if (this.isConnected)
+        this.#render(); }
+    /** 주 언어 태그로 가린다 — en · en-US · en-GB 는 영어, 그 밖은 한국어. */
+    get #lang() { return /^en(-|$)/i.test(this.getAttribute('lang') ?? '') ? 'en' : 'ko'; }
+    get #theme() {
+        const t = this.getAttribute('theme');
+        if (t === 'light' || t === 'dark')
+            return t;
+        return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    #render() {
+        const lang = this.#lang;
+        const theme = this.#theme;
+        this.dataset.resolvedTheme = theme;
+        const t = TEXT[lang];
+        const own = this.getAttribute('product');
+        const others = products.filter(p => p.id !== own && p.site);
+        const group = (family, label) => {
+            const items = others.filter(p => p.family === family);
+            if (items.length === 0)
+                return '';
+            return `<div role="group" aria-labelledby="label-${family}"><p class="label" id="label-${family}">${esc(label)}</p><ul>${items
+                .map(p => `<li><a href="${esc(p.site)}">${p.mark ? mark(p.id, theme) : ''}<span>${esc(p.name)}</span></a></li>`)
+                .join('')}</ul></div>`;
+        };
+        this.#root.innerHTML = `<style>${STYLE}</style>
+<div class="row">
+  <a part="link" href="${lang === 'en' ? `${HUB}/en/` : HUB}">${mark('u-platform', theme)}<span>${esc(umbrella.name)}</span></a>
+  <button part="toggle" type="button" aria-expanded="false" aria-controls="list" aria-label="${esc(t.toggle)}">▾</button>
+</div>
+<div part="list" id="list" hidden>${group('solutions', t.solutions)}${group('system', t.system)}${group('cross', t.cross)}</div>`;
+        const toggle = this.#root.querySelector('[part="toggle"]');
+        const list = this.#root.querySelector('[part="list"]');
+        toggle.addEventListener('click', e => { e.stopPropagation(); list.hidden ? this.#open() : this.#close(false); });
+        list.addEventListener('keydown', e => { if (e.key === 'Escape')
+            this.#close(true); });
+        toggle.addEventListener('keydown', e => { if (e.key === 'Escape')
+            this.#close(true); });
+    }
+    #open() {
+        const list = this.#root.querySelector('[part="list"]');
+        list.hidden = false;
+        this.#root.querySelector('[part="toggle"]').setAttribute('aria-expanded', 'true');
+    }
+    #close(returnFocus) {
+        const list = this.#root.querySelector('[part="list"]');
+        const toggle = this.#root.querySelector('[part="toggle"]');
+        if (!list || !toggle || list.hidden)
+            return;
+        list.hidden = true;
+        toggle.setAttribute('aria-expanded', 'false');
+        if (returnFocus)
+            toggle.focus();
+    }
+}
+export function defineAffiliation(registry = customElements) {
+    if (!registry.get('uplatform-affiliation'))
+        registry.define('uplatform-affiliation', UplatformAffiliation);
+}

package/dist/generated/geometry.json

@@ -0,0 +1,135 @@
+{
+  "viewBox": "0 0 64 64",
+  "size": 64,
+  "arms": "M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z",
+  "bowl": "M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z",
+  "stroke": {
+    "d": "M11.000 -2.000V32.000A21.000 21.000 0 0 0 53.000 32.000V-2.000",
+    "width": 30,
+    "head": 9
+  },
+  "band": {
+    "y": 30,
+    "height": 34
+  },
+  "glyphStroke": 2.25,
+  "ink": {
+    "light": "#333232",
+    "dark": "#D6D6D6"
+  },
+  "track": {
+    "light": "#C9CDD3",
+    "dark": "#3A4150"
+  },
+  "products": {
+    "u-platform": {
+      "name": "U-Platform",
+      "color": {
+        "light": "#3C62A1",
+        "dark": "#80A5E3"
+      },
+      "glyph": {
+        "d": "M26.00 27.20H38.00M26.00 32.00H38.00M26.00 36.80H38.00",
+        "filled": false
+      }
+    },
+    "u-cmms": {
+      "name": "U-CMMS",
+      "color": {
+        "light": "#556E1C",
+        "dark": "#96B069"
+      },
+      "glyph": {
+        "d": "M27.20 32.00A4.80 4.80 0 1 0 36.80 32.00A4.80 4.80 0 1 0 27.20 32.00Z",
+        "filled": false
+      }
+    },
+    "u-mes": {
+      "name": "U-MES",
+      "color": {
+        "light": "#00728A",
+        "dark": "#4DB4CC"
+      },
+      "glyph": {
+        "d": "M27.80 26.00L37.40 32.00L27.80 38.00Z",
+        "filled": false
+      }
+    },
+    "u-board": {
+      "name": "U-Board",
+      "color": {
+        "light": "#007759",
+        "dark": "#5CB99B"
+      },
+      "glyph": {
+        "d": "M26.00 26.00H38.00V38.00H26.00ZM32.00 26.00V38.00M26.00 32.00H38.00",
+        "filled": false
+      }
+    },
+    "u-draw": {
+      "name": "U-Draw",
+      "color": {
+        "light": "#974936",
+        "dark": "#DB8E7A"
+      },
+      "glyph": {
+        "d": "M26.00 32.00H38.00M32.00 26.00V38.00",
+        "filled": false
+      }
+    },
+    "u-sphere": {
+      "name": "U-Sphere",
+      "color": {
+        "light": "#725195",
+        "dark": "#B395D7"
+      },
+      "glyph": {
+        "d": "M32.00 26.00L38.00 32.00L32.00 38.00L26.00 32.00Z",
+        "filled": false
+      }
+    },
+    "u-vision": {
+      "name": "U-Vision",
+      "color": {
+        "light": "#845B00",
+        "dark": "#C69E58"
+      },
+      "glyph": {
+        "d": "M28.70 32.00A3.30 3.30 0 1 0 35.30 32.00A3.30 3.30 0 1 0 28.70 32.00Z",
+        "filled": true
+      }
+    },
+    "u-ems": {
+      "name": "U-EMS",
+      "color": {
+        "light": "#915115",
+        "dark": "#D49464"
+      },
+      "glyph": {
+        "d": "M33.80 26.00L29.00 32.60L35.00 31.40L30.20 38.00",
+        "filled": false
+      }
+    }
+  },
+  "timing": {
+    "reveal": {
+      "duration": 1500,
+      "stroke": [
+        0,
+        0.55
+      ],
+      "band": [
+        0.55,
+        0.82
+      ],
+      "glyph": [
+        0.82,
+        1
+      ]
+    },
+    "chase": {
+      "duration": 1800,
+      "length": 0.32
+    }
+  }
+}

package/dist/generated/marks.d.ts

@@ -0,0 +1,4 @@
+export declare const MARKS: Record<string, {
+    light: string;
+    dark: string;
+}>;

package/dist/generated/marks.js

@@ -0,0 +1,11 @@
+// 생성물 — 직접 고치지 않는다.
+export const MARKS = {
+    "u-cmms": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#556E1C\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#556E1C\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M27.20 32.00A4.80 4.80 0 1 0 36.80 32.00A4.80 4.80 0 1 0 27.20 32.00Z\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#96B069\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#96B069\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M27.20 32.00A4.80 4.80 0 1 0 36.80 32.00A4.80 4.80 0 1 0 27.20 32.00Z\"/></svg>" },
+    "u-mes": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#00728A\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#00728A\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M27.80 26.00L37.40 32.00L27.80 38.00Z\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#4DB4CC\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#4DB4CC\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M27.80 26.00L37.40 32.00L27.80 38.00Z\"/></svg>" },
+    "u-ems": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#915115\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#915115\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M33.80 26.00L29.00 32.60L35.00 31.40L30.20 38.00\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#D49464\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#D49464\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M33.80 26.00L29.00 32.60L35.00 31.40L30.20 38.00\"/></svg>" },
+    "u-sphere": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#725195\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#725195\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M32.00 26.00L38.00 32.00L32.00 38.00L26.00 32.00Z\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#B395D7\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#B395D7\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M32.00 26.00L38.00 32.00L32.00 38.00L26.00 32.00Z\"/></svg>" },
+    "u-board": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#007759\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#007759\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 26.00H38.00V38.00H26.00ZM32.00 26.00V38.00M26.00 32.00H38.00\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#5CB99B\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#5CB99B\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 26.00H38.00V38.00H26.00ZM32.00 26.00V38.00M26.00 32.00H38.00\"/></svg>" },
+    "u-vision": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#845B00\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"#845B00\" d=\"M28.70 32.00A3.30 3.30 0 1 0 35.30 32.00A3.30 3.30 0 1 0 28.70 32.00Z\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#C69E58\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"#C69E58\" d=\"M28.70 32.00A3.30 3.30 0 1 0 35.30 32.00A3.30 3.30 0 1 0 28.70 32.00Z\"/></svg>" },
+    "u-draw": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#974936\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#974936\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 32.00H38.00M32.00 26.00V38.00\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#DB8E7A\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#DB8E7A\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 32.00H38.00M32.00 26.00V38.00\"/></svg>" },
+    "u-platform": { light: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#333232\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#3C62A1\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#3C62A1\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 27.20H38.00M26.00 32.00H38.00M26.00 36.80H38.00\"/></svg>", dark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\"><path fill=\"#D6D6D6\" d=\"M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z\"/><path fill=\"#80A5E3\" d=\"M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z\"/><path fill=\"none\" stroke=\"#80A5E3\" stroke-width=\"2.250\" stroke-linejoin=\"miter\" d=\"M26.00 27.20H38.00M26.00 32.00H38.00M26.00 36.80H38.00\"/></svg>" },
+};

package/dist/generated/products.json

@@ -0,0 +1,104 @@
+{
+  "umbrella": {
+    "name": "U-Platform",
+    "hue": 260,
+    "color": {
+      "light": "#3C62A1",
+      "dark": "#80A5E3"
+    },
+    "ink": {
+      "light": "#333232",
+      "dark": "#D6D6D6"
+    }
+  },
+  "products": [
+    {
+      "id": "u-cmms",
+      "name": "U-CMMS",
+      "family": "solutions",
+      "site": "https://cmms.u-platform.kr",
+      "hue": 125,
+      "color": {
+        "light": "#556E1C",
+        "dark": "#96B069"
+      },
+      "glyph": "ring",
+      "mark": true
+    },
+    {
+      "id": "u-mes",
+      "name": "U-MES",
+      "family": "solutions",
+      "hue": 215,
+      "color": {
+        "light": "#00728A",
+        "dark": "#4DB4CC"
+      },
+      "glyph": "flow",
+      "mark": true
+    },
+    {
+      "id": "u-ems",
+      "name": "U-EMS",
+      "family": "solutions",
+      "hue": 57.5,
+      "color": {
+        "light": "#915115",
+        "dark": "#D49464"
+      },
+      "glyph": "bolt",
+      "mark": true
+    },
+    {
+      "id": "u-sphere",
+      "name": "U-Sphere",
+      "family": "system",
+      "hue": 305,
+      "color": {
+        "light": "#725195",
+        "dark": "#B395D7"
+      },
+      "glyph": "node",
+      "mark": true
+    },
+    {
+      "id": "u-board",
+      "name": "U-Board",
+      "family": "cross",
+      "site": "https://github.com/iyulab/U-Board",
+      "hue": 170,
+      "color": {
+        "light": "#007759",
+        "dark": "#5CB99B"
+      },
+      "glyph": "grid",
+      "mark": true
+    },
+    {
+      "id": "u-vision",
+      "name": "U-Vision",
+      "family": "cross",
+      "site": "https://github.com/iyulab/U-Vision",
+      "hue": 80,
+      "color": {
+        "light": "#845B00",
+        "dark": "#C69E58"
+      },
+      "glyph": "dot",
+      "mark": true
+    },
+    {
+      "id": "u-draw",
+      "name": "U-Draw",
+      "family": "cross",
+      "site": "https://udraw.iyulab.com",
+      "hue": 35,
+      "color": {
+        "light": "#974936",
+        "dark": "#DB8E7A"
+      },
+      "glyph": "plus",
+      "mark": true
+    }
+  ]
+}

package/dist/generated/u-motion.d.ts

@@ -0,0 +1,22 @@
+export type State = {
+    mode: 'reveal' | 'chase' | 'still';
+    stroke: [number, number];
+    band: [number, number];
+    glyph: number;
+    head: boolean;
+};
+/** @typedef {{ mode: 'reveal'|'chase'|'still', stroke: [number, number], band: [number, number], glyph: number, head: boolean }} State */
+/** @type {Readonly<State>} 완성 마크 — 움직임 줄이기 · motion="none" */
+export declare const DONE: Readonly<State>;
+/** @param {any} timing @param {number} p @returns {State} */
+export declare function revealAt(timing: any, p: number): State;
+/** @param {any} timing @param {number} p @returns {State} */
+export declare function chaseAt(timing: any, p: number): State;
+/**
+ * svg 안에 마크를 세운다. 같은 페이지에 여럿이어도 clipPath id 가 겹치지 않는다.
+ * @param {SVGSVGElement} svg @param {any} geo @param {string} id @param {'light'|'dark'} theme
+ * @returns {{ set(state: State): void }}
+ */
+export declare function mount(svg: SVGSVGElement, geo: any, id: string, theme: 'light' | 'dark'): {
+    set(state: State): void;
+};

package/dist/generated/u-motion.js

@@ -0,0 +1,91 @@
+/* U 시리즈 모션 — 유일한 렌더러. 기하는 호출자가 넘겨주는 생성된 기하 데이터에서 온다.
+   빈 바탕에 한 획으로 U 를 긋고, 가로획이 그릇에 제품 색을 입힌다. 바탕은 칠하지 않는다.
+   상태 함수는 순수하다(시간이 아니라 진행도 p 를 받는다) — 캡처가 재현 가능하다. */
+const NS = 'http://www.w3.org/2000/svg';
+const clamp = x => Math.max(0, Math.min(1, x));
+const seg = (p, [a, b]) => clamp((p - a) / (b - a));
+const easeInOut = t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+const easeOut = t => 1 - Math.pow(1 - t, 3);
+/** @typedef {{ mode: 'reveal'|'chase'|'still', stroke: [number, number], band: [number, number], glyph: number, head: boolean }} State */
+/** @type {Readonly<State>} 완성 마크 — 움직임 줄이기 · motion="none" */
+export const DONE = Object.freeze({ mode: 'still', stroke: [0, 1], band: [0, 1], glyph: 1, head: false });
+/** @param {any} timing @param {number} p @returns {State} */
+export function revealAt(timing, p) {
+    const T = timing.reveal;
+    return { mode: 'reveal', stroke: [0, easeInOut(seg(p, T.stroke))], band: [0, easeInOut(seg(p, T.band))], glyph: easeOut(seg(p, T.glyph)), head: true };
+}
+/** @param {any} timing @param {number} p @returns {State} */
+export function chaseAt(timing, p) {
+    const L = timing.chase.length;
+    const x = easeInOut(p < 0.5 ? p * 2 : 2 - p * 2);
+    const a = x * (1 - L);
+    return { mode: 'chase', stroke: [a, a + L], band: [0, 0], glyph: 1, head: false };
+}
+let serial = 0;
+/**
+ * svg 안에 마크를 세운다. 같은 페이지에 여럿이어도 clipPath id 가 겹치지 않는다.
+ * @param {SVGSVGElement} svg @param {any} geo @param {string} id @param {'light'|'dark'} theme
+ * @returns {{ set(state: State): void }}
+ */
+export function mount(svg, geo, id, theme) {
+    const p = geo.products[id];
+    if (!p)
+        throw new Error(`u-motion: unknown product ${id}`);
+    const doc = svg.ownerDocument;
+    const el = (tag, attrs, parent) => {
+        const n = doc.createElementNS(NS, tag);
+        for (const k in attrs)
+            n.setAttribute(k, String(attrs[k]));
+        parent.appendChild(n);
+        return n;
+    };
+    const uid = `um${++serial}`;
+    const ink = geo.ink[theme], color = p.color[theme], track = geo.track[theme];
+    svg.setAttribute('viewBox', geo.viewBox);
+    while (svg.firstChild)
+        svg.removeChild(svg.firstChild);
+    const defs = el('defs', {}, svg);
+    const markClip = el('clipPath', { id: `${uid}m` }, defs);
+    el('path', { d: geo.arms }, markClip);
+    el('path', { d: geo.bowl }, markClip);
+    const bowlClip = el('clipPath', { id: `${uid}b` }, defs);
+    el('path', { d: geo.bowl }, bowlClip);
+    const trackG = el('g', { fill: track, display: 'none' }, svg);
+    el('path', { d: geo.arms }, trackG);
+    el('path', { d: geo.bowl }, trackG);
+    const body = el('g', { 'clip-path': `url(#${uid}m)` }, svg);
+    const stroke = el('path', { d: geo.stroke.d, fill: 'none', 'stroke-width': geo.stroke.width, pathLength: 1 }, body);
+    const head = el('circle', { r: 0 }, body);
+    const band = el('rect', { x: 0, y: geo.band.y, width: 0, height: geo.band.height, fill: color, 'clip-path': `url(#${uid}b)` }, svg);
+    const glyph = el('path', p.glyph.filled
+        ? { d: p.glyph.d, class: 'glyph' }
+        : { d: p.glyph.d, class: 'glyph', fill: 'none', 'stroke-width': geo.glyphStroke, 'stroke-linejoin': 'miter' }, svg);
+    // 붓머리 위치는 브라우저만 잴 수 있다(jsdom 등엔 없다) — 없으면 머리 없이 그린다.
+    const measurable = typeof stroke.getPointAtLength === 'function' && typeof stroke.getTotalLength === 'function';
+    const W = geo.size;
+    return {
+        set(s) {
+            const chase = s.mode === 'chase';
+            trackG.setAttribute('display', chase ? 'inline' : 'none');
+            const strokeColor = chase ? color : ink;
+            stroke.setAttribute('stroke', strokeColor);
+            head.setAttribute('fill', strokeColor);
+            const glyphColor = chase ? ink : color;
+            glyph.setAttribute(p.glyph.filled ? 'fill' : 'stroke', glyphColor);
+            const [a, b] = s.stroke;
+            stroke.setAttribute('stroke-dasharray', `0 ${a} ${Math.max(0, b - a)} 2`);
+            let r = 0;
+            if (s.head && measurable && b > 0 && b < 1) {
+                const pt = stroke.getPointAtLength(stroke.getTotalLength() * b);
+                head.setAttribute('cx', pt.x);
+                head.setAttribute('cy', pt.y);
+                r = geo.stroke.head;
+            }
+            head.setAttribute('r', r);
+            const [b0, b1] = s.band;
+            band.setAttribute('x', W * b0 - 0.5);
+            band.setAttribute('width', b1 > b0 ? W * (b1 - b0) + 1 : 0);
+            glyph.setAttribute('opacity', s.glyph);
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { products, umbrella, productHref, HUB, type Product } from './products.ts';
+export { UplatformAffiliation, defineAffiliation } from './affiliation.ts';
+export { UMark, defineMark } from './mark.ts';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { products, umbrella, productHref, HUB } from './products.js';
+export { UplatformAffiliation, defineAffiliation } from './affiliation.js';
+export { UMark, defineMark } from './mark.js';
+import { defineAffiliation } from './affiliation.js';
+import { defineMark } from './mark.js';
+// 진입점을 import 하면 두 태그가 등록된다. 등록 없이 쓰려면 './products' 를 import 한다.
+if (typeof customElements !== 'undefined') {
+    defineAffiliation();
+    defineMark();
+}

package/dist/mark.d.ts

@@ -0,0 +1,8 @@
+export declare class UMark extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export declare function defineMark(registry?: CustomElementRegistry): void;

package/dist/mark.js

@@ -0,0 +1,125 @@
+// <u-mark> — U 시리즈 마크. 등장(빈 바탕에 한 획 + 가로획 색) · Chase(로딩) · 정지.
+// 렌더러는 키트의 유일한 구현(generated/u-motion.js)이다 — 여기서 다시 그리지 않는다.
+import geometry from './generated/geometry.json' with { type: 'json' };
+import { mount, revealAt, chaseAt, DONE } from './generated/u-motion.js';
+const STYLE = `
+:host { display: inline-block; width: 64px; height: auto; aspect-ratio: 1; container-type: size; }
+svg { display: block; width: 100%; height: 100%; overflow: visible; }
+@container (max-width: 32px) or (max-height: 32px) { .glyph { display: none; } }
+`;
+export class UMark extends HTMLElement {
+    static observedAttributes = ['product', 'motion', 'theme', 'play'];
+    #root = this.attachShadow({ mode: 'open' });
+    #raf = 0;
+    /** 렌더 세대 — 옛 렌더의 rAF·관찰자 콜백이 늦게 도착해도 현재 마크를 건드리지 못하게 한다. */
+    #gen = 0;
+    /** 등장이 한 번 시작됐다 — 이후 재렌더(테마 전환 등)는 완성 마크를 바로 그린다. product·motion 변경만 되돌린다. */
+    #revealed = false;
+    /** 연결 콜백을 지났다 — 업그레이드 때는 속성 콜백들이 연결 콜백보다 먼저 오면서 isConnected 는 이미 참이라,
+     * 그 사이 렌더가 등장을 «시작됨»으로 소진해 버린다. 렌더는 연결 콜백 이후에만 한다. */
+    #connected = false;
+    #io;
+    #scheme;
+    #onScheme = () => { const t = this.getAttribute('theme'); if (t !== 'light' && t !== 'dark')
+        this.#render(); };
+    connectedCallback() {
+        this.#connected = true;
+        this.#render();
+        this.#scheme = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        this.#scheme?.addEventListener('change', this.#onScheme);
+    }
+    disconnectedCallback() {
+        this.#connected = false;
+        this.#stop();
+        this.#scheme?.removeEventListener('change', this.#onScheme);
+        this.#scheme = undefined;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'product' || name === 'motion')
+            this.#revealed = false;
+        if (this.#connected)
+            this.#render();
+    }
+    get #theme() {
+        const t = this.getAttribute('theme');
+        if (t === 'light' || t === 'dark')
+            return t;
+        return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    get #reduced() { return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; }
+    #stop() {
+        if (this.#raf)
+            cancelAnimationFrame(this.#raf);
+        this.#raf = 0;
+        this.#io?.disconnect();
+        this.#io = undefined;
+    }
+    #render() {
+        this.#stop();
+        const gen = ++this.#gen;
+        const id = this.getAttribute('product') ?? 'u-platform';
+        if (!Object.hasOwn(geometry.products, id)) {
+            this.#root.innerHTML = '';
+            console.error(`<u-mark>: unknown product "${id}"`);
+            return;
+        }
+        this.#root.innerHTML = `<style>${STYLE}</style><svg aria-hidden="true" focusable="false"></svg>`;
+        const ctl = mount(this.#root.querySelector('svg'), geometry, id, this.#theme);
+        const motion = this.getAttribute('motion');
+        if (this.#reduced || (motion !== 'reveal' && motion !== 'chase')) {
+            ctl.set(DONE);
+            return;
+        }
+        const timing = geometry.timing;
+        if (motion === 'chase') {
+            const t0 = performance.now();
+            const tick = (now) => {
+                if (gen !== this.#gen)
+                    return;
+                ctl.set(chaseAt(timing, ((now - t0) % timing.chase.duration) / timing.chase.duration));
+                this.#raf = requestAnimationFrame(tick);
+            };
+            this.#raf = requestAnimationFrame(tick);
+            return;
+        }
+        if (this.#revealed) {
+            ctl.set(DONE);
+            return;
+        }
+        ctl.set(revealAt(timing, 0));
+        const play = () => {
+            if (gen !== this.#gen)
+                return;
+            this.#revealed = true;
+            const t0 = performance.now();
+            const tick = (now) => {
+                if (gen !== this.#gen)
+                    return;
+                const p = Math.min(1, (now - t0) / timing.reveal.duration);
+                ctl.set(p < 1 ? revealAt(timing, p) : DONE);
+                this.#raf = p < 1 ? requestAnimationFrame(tick) : 0;
+            };
+            this.#raf = requestAnimationFrame(tick);
+        };
+        const IO = globalThis.IntersectionObserver;
+        if (this.getAttribute('play') === 'visible' && typeof IO === 'function') {
+            const io = new IO(entries => {
+                // 문턱 0.5 여도 첫 통지는 가장자리만 걸친 상태로 올 수 있다 — 비율을 직접 확인한다.
+                if (this.#io !== io || !entries.some(e => e.isIntersecting && e.intersectionRatio >= 0.5))
+                    return;
+                io.disconnect();
+                this.#io = undefined;
+                play();
+            }, { threshold: 0.5 });
+            this.#io = io;
+            io.observe(this);
+        }
+        else {
+            play();
+        }
+    }
+}
+export function defineMark(registry = customElements) {
+    if (!registry.get('u-mark'))
+        registry.define('u-mark', UMark);
+}

package/dist/products.d.ts

@@ -0,0 +1,30 @@
+export interface Product {
+    id: string;
+    name: string;
+    family: 'solutions' | 'system' | 'cross';
+    /** 제품 자신의 공개 페이지. 없으면 링크하지 않는다(갈 곳이 없다). */
+    site?: string;
+    hue?: number;
+    color?: {
+        light: string;
+        dark: string;
+    };
+    glyph?: string;
+    mark: boolean;
+}
+export declare const HUB = "https://u-platform.kr";
+export declare const products: readonly Product[];
+export declare const umbrella: {
+    name: string;
+    hue: number;
+    color: {
+        light: string;
+        dark: string;
+    };
+    ink: {
+        light: string;
+        dark: string;
+    };
+};
+/** 갈 곳이 있으면 그 주소, 없으면 undefined — 쓰는 쪽은 링크 대신 글자만 둔다. */
+export declare function productHref(product: Product): string | undefined;

package/dist/products.js

@@ -0,0 +1,8 @@
+import data from './generated/products.json' with { type: 'json' };
+export const HUB = 'https://u-platform.kr';
+export const products = data.products;
+export const umbrella = data.umbrella;
+/** 갈 곳이 있으면 그 주소, 없으면 undefined — 쓰는 쪽은 링크 대신 글자만 둔다. */
+export function productHref(product) {
+    return product.site;
+}

package/marks/iyulab-wordmark-reverse.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1079.3771 647.507" width="1079.3771" height="647.507" role="img">
+  <title>iyulab</title>
+  <g transform="translate(-373.6,-188.42)">
+    <path fill="#333232" d="M373.6,419.55A231.13,231.13 0 1,1 835.86,419.55A231.13,231.13 0 1,1 373.6,419.55Z"/>
+    <path fill="#D6D6D6" d="M697.182,207.7159A231.13,231.13 0 1,0 697.182,631.3841Z"/>
+    <path fill="#333232" d="M990.7171,419.55A231.13,231.13 0 1,1 1452.9771,419.55A231.13,231.13 0 1,1 990.7171,419.55Z"/>
+    <path fill="#D6D6D6" d="M1433.6812,512.002A231.13,231.13 0 1,0 1010.013,512.002Z"/>
+    <path fill="#D6D6D6" d="M1187.4665,572.2114L1256.2277,572.2114L1256.2277,648.1086A231.13,231.13 0 0,1 1187.4665,648.1086Z"/>
+    <path fill="#D6D6D6" d="M446.566,726.223H465.327V833.363H446.566ZZ"/>
+    <path fill="#D6D6D6" d="M599.63,791.335L559.411,726.223L581.148,726.223L609.527,774.235L637.446,726.223L658.443,726.223L618.373,791.335L618.373,833.362L599.63,833.362L599.63,791.335Z"/>
+    <path fill="#D6D6D6" d="M751.164,726.223L769.941,726.223L769.941,788.638C769.941,793.358 770.171,797.353 770.599,800.675C771.059,803.963 772.077,807.055 773.688,809.964C775.285,812.859 777.832,815.21 781.334,817.019C784.838,818.827 789.441,819.714 795.147,819.714C800.835,819.714 805.457,818.827 808.942,817.019C812.444,815.21 814.994,812.859 816.604,809.964C818.182,807.055 819.218,803.963 819.662,800.675C820.123,797.353 820.352,793.358 820.352,788.638L820.352,726.223L839.114,726.223L839.114,794.804C839.114,808.204 835.185,818.4 827.325,825.404C819.465,832.424 808.745,835.927 795.147,835.927C781.533,835.927 770.796,832.424 762.952,825.404C755.094,818.4 751.164,808.204 751.164,794.804L751.164,726.223Z"/>
+    <path fill="#D6D6D6" d="M944.132,726.223L962.909,726.223L962.909,817.15L1017.366,817.15L1017.366,833.363L944.132,833.363L944.132,726.223Z"/>
+    <path fill="#D6D6D6" d="M1135.753,790.742L1168.473,790.742L1152.408,744.671L1151.964,744.671L1135.753,790.742M1142.361,726.222L1162.324,726.222L1203.594,833.362L1183.468,833.362L1173.406,804.998L1130.655,804.998L1120.608,833.362L1101.256,833.362L1142.361,726.222Z"/>
+    <path fill="#D6D6D6" d="M1315.962,818.07L1349.126,818.07C1354.832,818.07 1359.271,816.591 1362.412,813.631C1365.553,810.671 1367.13,806.495 1367.13,801.102C1367.13,795.906 1365.553,791.86 1362.412,788.933C1359.271,786.056 1354.832,784.593 1349.126,784.593L1315.962,784.593L1315.962,818.07M1315.962,771.078L1346.577,771.078C1351.182,771.078 1354.964,769.796 1357.906,767.197C1360.85,764.599 1362.33,760.949 1362.33,756.247C1362.33,750.953 1361.03,747.17 1358.432,744.902C1355.834,742.666 1351.872,741.548 1346.577,741.548L1315.962,741.548L1315.962,771.078M1297.218,726.222L1349.275,726.222C1359.19,726.222 1366.967,728.492 1372.622,732.981C1378.278,737.469 1381.107,744.08 1381.107,752.793C1381.107,758.089 1379.758,762.692 1377.111,766.59C1374.464,770.485 1370.683,773.477 1365.783,775.598L1365.783,775.912C1372.294,777.293 1377.259,780.418 1380.713,785.284C1384.166,790.118 1385.892,796.203 1385.892,803.502C1385.892,812.413 1382.62,819.616 1376.059,825.108C1369.514,830.616 1359.633,833.362 1346.429,833.362L1297.218,833.362L1297.218,726.222Z"/>
+  </g>
+</svg>

package/marks/iyulab-wordmark.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1079.3771 647.507" width="1079.3771" height="647.507" role="img">
+  <title>iyulab</title>
+  <g transform="translate(-373.6,-188.42)">
+    <path fill="#D6D6D6" d="M373.6,419.55A231.13,231.13 0 1,1 835.86,419.55A231.13,231.13 0 1,1 373.6,419.55Z"/>
+    <path fill="#333232" d="M697.182,207.7159A231.13,231.13 0 1,0 697.182,631.3841Z"/>
+    <path fill="#D6D6D6" d="M990.7171,419.55A231.13,231.13 0 1,1 1452.9771,419.55A231.13,231.13 0 1,1 990.7171,419.55Z"/>
+    <path fill="#333232" d="M1433.6812,512.002A231.13,231.13 0 1,0 1010.013,512.002Z"/>
+    <path fill="#333232" d="M1187.4665,572.2114L1256.2277,572.2114L1256.2277,648.1086A231.13,231.13 0 0,1 1187.4665,648.1086Z"/>
+    <path fill="#333232" d="M446.566,726.223H465.327V833.363H446.566ZZ"/>
+    <path fill="#333232" d="M599.63,791.335L559.411,726.223L581.148,726.223L609.527,774.235L637.446,726.223L658.443,726.223L618.373,791.335L618.373,833.362L599.63,833.362L599.63,791.335Z"/>
+    <path fill="#333232" d="M751.164,726.223L769.941,726.223L769.941,788.638C769.941,793.358 770.171,797.353 770.599,800.675C771.059,803.963 772.077,807.055 773.688,809.964C775.285,812.859 777.832,815.21 781.334,817.019C784.838,818.827 789.441,819.714 795.147,819.714C800.835,819.714 805.457,818.827 808.942,817.019C812.444,815.21 814.994,812.859 816.604,809.964C818.182,807.055 819.218,803.963 819.662,800.675C820.123,797.353 820.352,793.358 820.352,788.638L820.352,726.223L839.114,726.223L839.114,794.804C839.114,808.204 835.185,818.4 827.325,825.404C819.465,832.424 808.745,835.927 795.147,835.927C781.533,835.927 770.796,832.424 762.952,825.404C755.094,818.4 751.164,808.204 751.164,794.804L751.164,726.223Z"/>
+    <path fill="#333232" d="M944.132,726.223L962.909,726.223L962.909,817.15L1017.366,817.15L1017.366,833.363L944.132,833.363L944.132,726.223Z"/>
+    <path fill="#333232" d="M1135.753,790.742L1168.473,790.742L1152.408,744.671L1151.964,744.671L1135.753,790.742M1142.361,726.222L1162.324,726.222L1203.594,833.362L1183.468,833.362L1173.406,804.998L1130.655,804.998L1120.608,833.362L1101.256,833.362L1142.361,726.222Z"/>
+    <path fill="#333232" d="M1315.962,818.07L1349.126,818.07C1354.832,818.07 1359.271,816.591 1362.412,813.631C1365.553,810.671 1367.13,806.495 1367.13,801.102C1367.13,795.906 1365.553,791.86 1362.412,788.933C1359.271,786.056 1354.832,784.593 1349.126,784.593L1315.962,784.593L1315.962,818.07M1315.962,771.078L1346.577,771.078C1351.182,771.078 1354.964,769.796 1357.906,767.197C1360.85,764.599 1362.33,760.949 1362.33,756.247C1362.33,750.953 1361.03,747.17 1358.432,744.902C1355.834,742.666 1351.872,741.548 1346.577,741.548L1315.962,741.548L1315.962,771.078M1297.218,726.222L1349.275,726.222C1359.19,726.222 1366.967,728.492 1372.622,732.981C1378.278,737.469 1381.107,744.08 1381.107,752.793C1381.107,758.089 1379.758,762.692 1377.111,766.59C1374.464,770.485 1370.683,773.477 1365.783,775.598L1365.783,775.912C1372.294,777.293 1377.259,780.418 1380.713,785.284C1384.166,790.118 1385.892,796.203 1385.892,803.502C1385.892,812.413 1382.62,819.616 1376.059,825.108C1369.514,830.616 1359.633,833.362 1346.429,833.362L1297.218,833.362L1297.218,726.222Z"/>
+  </g>
+</svg>

package/marks/u-board-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#5CB99B" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#5CB99B" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 26.00H38.00V38.00H26.00ZM32.00 26.00V38.00M26.00 32.00H38.00"/></svg>

package/marks/u-board.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#007759" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#007759" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 26.00H38.00V38.00H26.00ZM32.00 26.00V38.00M26.00 32.00H38.00"/></svg>

package/marks/u-cmms-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#96B069" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#96B069" stroke-width="2.250" stroke-linejoin="miter" d="M27.20 32.00A4.80 4.80 0 1 0 36.80 32.00A4.80 4.80 0 1 0 27.20 32.00Z"/></svg>

package/marks/u-cmms.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#556E1C" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#556E1C" stroke-width="2.250" stroke-linejoin="miter" d="M27.20 32.00A4.80 4.80 0 1 0 36.80 32.00A4.80 4.80 0 1 0 27.20 32.00Z"/></svg>

package/marks/u-draw-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#DB8E7A" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#DB8E7A" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 32.00H38.00M32.00 26.00V38.00"/></svg>

package/marks/u-draw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#974936" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#974936" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 32.00H38.00M32.00 26.00V38.00"/></svg>

package/marks/u-ems-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#D49464" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#D49464" stroke-width="2.250" stroke-linejoin="miter" d="M33.80 26.00L29.00 32.60L35.00 31.40L30.20 38.00"/></svg>

package/marks/u-ems.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#915115" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#915115" stroke-width="2.250" stroke-linejoin="miter" d="M33.80 26.00L29.00 32.60L35.00 31.40L30.20 38.00"/></svg>

package/marks/u-mes-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#4DB4CC" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#4DB4CC" stroke-width="2.250" stroke-linejoin="miter" d="M27.80 26.00L37.40 32.00L27.80 38.00Z"/></svg>

package/marks/u-mes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#00728A" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#00728A" stroke-width="2.250" stroke-linejoin="miter" d="M27.80 26.00L37.40 32.00L27.80 38.00Z"/></svg>

package/marks/u-platform-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#80A5E3" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#80A5E3" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 27.20H38.00M26.00 32.00H38.00M26.00 36.80H38.00"/></svg>

package/marks/u-platform.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#3C62A1" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#3C62A1" stroke-width="2.250" stroke-linejoin="miter" d="M26.00 27.20H38.00M26.00 32.00H38.00M26.00 36.80H38.00"/></svg>

package/marks/u-sphere-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#B395D7" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#B395D7" stroke-width="2.250" stroke-linejoin="miter" d="M32.00 26.00L38.00 32.00L32.00 38.00L26.00 32.00Z"/></svg>

package/marks/u-sphere.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#725195" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="none" stroke="#725195" stroke-width="2.250" stroke-linejoin="miter" d="M32.00 26.00L38.00 32.00L32.00 38.00L26.00 32.00Z"/></svg>

package/marks/u-vision-reverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#D6D6D6" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#C69E58" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="#C69E58" d="M28.70 32.00A3.30 3.30 0 1 0 35.30 32.00A3.30 3.30 0 1 0 28.70 32.00Z"/></svg>

package/marks/u-vision.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path fill="#333232" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000ZM44.000 32.000L44.000 7.407A1.800 1.800 0 0 1 46.681 5.838A30.000 30.000 0 0 1 62.000 32.000Z"/><path fill="#845B00" d="M2.000 32.000A30.000 30.000 0 0 0 62.000 32.000L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/><path fill="#845B00" d="M28.70 32.00A3.30 3.30 0 1 0 35.30 32.00A3.30 3.30 0 1 0 28.70 32.00Z"/></svg>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@uplatform/brand",
+  "version": "0.1.0",
+  "description": "U-Platform affiliation kit — product list, marks, the <uplatform-affiliation> and <u-mark> elements, mark renders and patterns.",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://u-platform.kr",
+  "publishConfig": { "access": "public" },
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+    "./products": { "types": "./dist/products.d.ts", "default": "./dist/products.js" },
+    "./products.json": "./dist/generated/products.json",
+    "./marks/*": "./marks/*",
+    "./patterns/*": "./patterns/*",
+    "./media/*": "./media/*"
+  },
+  "files": ["dist", "marks", "patterns", "media", "README.md", "LICENSE"],
+  "sideEffects": ["./dist/index.js", "./dist/affiliation.js", "./dist/mark.js"],
+  "scripts": {
+    "sync": "node scripts/sync-kit.mjs",
+    "build": "tsc -p tsconfig.build.json && node -e \"const f=require('node:fs');for(const n of ['products.json','geometry.json'])f.cpSync('src/generated/'+n,'dist/generated/'+n)\"",
+    "prepack": "npm run build"
+  },
+  "devDependencies": { "jsdom": "^29.1.1", "typescript": "^7.0.2" }
+}

package/patterns/u-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g transform="translate(14 14) scale(0.5625)"><path fill="none" stroke="#000" stroke-width="2.4" d="M20.000 32.000L20.000 7.407A1.800 1.800 0 0 0 17.319 5.838A30.000 30.000 0 0 0 2.000 32.000A30.000 30.000 0 0 0 62.000 32.000A30.000 30.000 0 0 0 46.681 5.838A1.800 1.800 0 0 0 44.000 7.407L44.000 32.000A12.000 12.000 0 0 1 20.000 32.000Z"/></g></svg>