@dataimago/ui 0.1.0-alpha.8 → 0.1.0-alpha.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n\n// Brand assets (outlined-path SVG components — no font dependency at render).\n// See packages/ui/src/brand/Logos.stories.tsx for visual reference.\nexport { LogoMonogram } from './brand/LogoMonogram.js';\nexport type { LogoMonogramProps } from './brand/LogoMonogram.js';\nexport { LogoMonogramBg } from './brand/LogoMonogramBg.js';\nexport type { LogoMonogramBgProps } from './brand/LogoMonogramBg.js';\nexport { LogoWordmark } from './brand/LogoWordmark.js';\nexport type { LogoWordmarkProps } from './brand/LogoWordmark.js';\n\n// Manifest-driven marks from @dataimago/brand (the logo-foundry output).\nexport { Logo } from './brand/Logo.js';\nexport type { LogoProps } from './brand/Logo.js';\n\n// Decorative brand animations from @dataimago/brand (the animation-foundry).\n// Client component: enforces the prefers-reduced-motion poster fallback.\nexport { BrandAnimation } from './brand/BrandAnimation.js';\nexport type { BrandAnimationProps } from './brand/BrandAnimation.js';\n\n// Animated navbar marks from @dataimago/brand (the animation-foundry navbar set).\n// Client component: mount/hover replay + prefers-reduced-motion poster fallback.\nexport { NavbarLogo } from './brand/NavbarLogo.js';\nexport type { NavbarLogoProps } from './brand/NavbarLogo.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n name: LogoId;\n /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n variant?: LogoVariant;\n /**\n * Render width (px number or any CSS length). Height scales proportionally\n * via the SVG viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n const key = `${name}_${variant}` as LogoKey;\n let markup = svgs[key];\n\n if (!markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n return null;\n }\n\n if (width != null) {\n // Set width + drop height so the viewBox preserves the aspect ratio.\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // The SVG is generated, font-free, and carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n animations,\n animationManifest,\n type AnimationId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n extends React.HTMLAttributes<HTMLSpanElement> {\n /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n name: AnimationId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the animation's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n name,\n width,\n style,\n ...rest\n}: BrandAnimationProps) {\n const reduced = usePrefersReducedMotion();\n const entry = animationManifest.find((a) => a.id === name);\n let markup = animations[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the brand mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n navbarLogos,\n navbarManifest,\n type NavbarLogoId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n name: NavbarLogoId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n * start apart and the `i` slides onto the `a`. Plays once on mount; replays\n * on pointer-enter via a remount (`replayKey`).\n * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n const reduced = usePrefersReducedMotion();\n\n const entry = navbarManifest.find((n) => n.id === name);\n let markup = navbarLogos[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the superimposed mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n // The SVG is fully self-driving: it plays the assemble once on mount (its\n // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n // CSS — no remount/replay logic here (remounting is what caused the teleport).\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // Self-contained, font-free SVG; carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n"],"mappings":"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","names":["Button","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React","import_brand","import_jsx_runtime","React","import_brand","import_jsx_runtime","usePrefersReducedMotion"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n\n// Brand assets (outlined-path SVG components — no font dependency at render).\n// See packages/ui/src/brand/Logos.stories.tsx for visual reference.\nexport { LogoMonogram } from './brand/LogoMonogram.js';\nexport type { LogoMonogramProps } from './brand/LogoMonogram.js';\nexport { LogoMonogramBg } from './brand/LogoMonogramBg.js';\nexport type { LogoMonogramBgProps } from './brand/LogoMonogramBg.js';\nexport { LogoWordmark } from './brand/LogoWordmark.js';\nexport type { LogoWordmarkProps } from './brand/LogoWordmark.js';\n\n// Manifest-driven marks from @dataimago/brand (the logo-foundry output).\nexport { Logo } from './brand/Logo.js';\nexport type { LogoProps } from './brand/Logo.js';\n\n// Decorative brand animations from @dataimago/brand (the animation-foundry).\n// Client component: enforces the prefers-reduced-motion poster fallback.\nexport { BrandAnimation } from './brand/BrandAnimation.js';\nexport type { BrandAnimationProps } from './brand/BrandAnimation.js';\n\n// Animated navbar marks from @dataimago/brand (the animation-foundry navbar set).\n// Client component: mount/hover replay + prefers-reduced-motion poster fallback.\nexport { NavbarLogo } from './brand/NavbarLogo.js';\nexport type { NavbarLogoProps } from './brand/NavbarLogo.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n name: LogoId;\n /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n variant?: LogoVariant;\n /**\n * Render width (px number or any CSS length). Height scales proportionally\n * via the SVG viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n const key = `${name}_${variant}` as LogoKey;\n let markup = svgs[key];\n\n if (!markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n return null;\n }\n\n if (width != null) {\n // Set width + drop height so the viewBox preserves the aspect ratio.\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // The SVG is generated, font-free, and carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n animations,\n animationManifest,\n type AnimationId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n extends React.HTMLAttributes<HTMLSpanElement> {\n /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n name: AnimationId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the animation's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n name,\n width,\n style,\n ...rest\n}: BrandAnimationProps) {\n const reduced = usePrefersReducedMotion();\n const entry = animationManifest.find((a) => a.id === name);\n let markup = animations[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the brand mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n navbarLogos,\n navbarManifest,\n type NavbarLogoId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n name: NavbarLogoId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n * start apart and the `i` slides onto the `a`. Plays once on mount; replays\n * on pointer-enter via a remount (`replayKey`).\n * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n const reduced = usePrefersReducedMotion();\n\n const entry = navbarManifest.find((n) => n.id === name);\n let markup = navbarLogos[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the superimposed mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n // The SVG is fully self-driving: it plays the assemble once on mount (its\n // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n // CSS — no remount/replay logic here (remounting is what caused the teleport).\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // Self-contained, font-free SVG; carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAgGjB;AArFN,IAAM,iBAAgD;AAAA,EACpD,SAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAW;AACb;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAiC;AAAA,EACrC,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AACd;AAEA,IAAM,gBAA4D;AAAA,EAChE,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA,EACT;AAAA,EACA,WAAW;AAAA,IACT,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA,EACT;AACF;AAEA,IAAM,aAAsD;AAAA,EAC1D,IAAI;AAAA,IACF,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF;AASO,IAAM,SAAe;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,OAAO,MAAM,YAAY,IAAI,OAAO,MAAM,UAAU,GAAG,KAAK,GACnF,KACA;AACA,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,YAAY,IAAI;AAAA,MAChB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW;AAAA,QACX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG,cAAc,OAAO;AAAA,UACxB,GAAG,WAAW,IAAI;AAAA,UAClB,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;;;ACxEI,IAAAC,sBAAA;AAPG,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,QAAQ,EAAE,MAAM,MAAe,IAAI,EAAE,eAAe,KAAc;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,gBAAQ,6CAAC,WAAO,iBAAM,IAAW;AAAA,QAElC,6CAAC,UAAK,GAAE,oWAAmW;AAAA,QAE3W,6CAAC,UAAK,GAAE,knBAAinB;AAAA;AAAA;AAAA,EAC3nB;AAEJ;;;ACbI,IAAAC,sBAAA;AAPG,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,QAAQ,EAAE,MAAM,MAAe,IAAI,EAAE,eAAe,KAAc;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,gBAAQ,6CAAC,WAAO,iBAAM,IAAW;AAAA,QAIlC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACzBI,IAAAC,sBAAA;AAPG,SAAS,aAAa;AAAA,EAC3B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,QAAQ,EAAE,MAAM,MAAe,IAAI,EAAE,eAAe,KAAc;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR;AAAA,MACA,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,gBAAQ,6CAAC,WAAO,iBAAM,IAAW;AAAA,QAIlC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACjFA,mBAAkE;AAyC9D,IAAAC,sBAAA;AAlBG,SAAS,KAAK,EAAE,MAAM,UAAU,QAAQ,OAAO,OAAO,GAAG,KAAK,GAAc;AACjF,QAAM,MAAM,GAAG,IAAI,IAAI,OAAO;AAC9B,MAAI,SAAS,kBAAK,GAAG;AAErB,MAAI,CAAC,QAAQ;AAEX,YAAQ,KAAK,yCAAyC,GAAG,IAAI;AAC7D,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,MAAM;AAEjB,aAAS,OACN,QAAQ,mBAAmB,WAAW,KAAK,GAAG,EAC9C,QAAQ,oBAAoB,EAAE;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,eAAe,GAAG,MAAM;AAAA,MAE1C,yBAAyB,EAAE,QAAQ,OAAO;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AC/CA,IAAAC,SAAuB;AACvB,IAAAC,gBAMO;AA8DD,IAAAC,sBAAA;AA1CN,SAAS,0BAAmC;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAU,gBAAS,IAAI;AACjD,EAAM,iBAAU,MAAM;AACpB,UAAM,KAAK,OAAO,WAAW,kCAAkC;AAC/D,eAAW,GAAG,OAAO;AACrB,UAAM,WAAW,CAAC,MAA2B,WAAW,EAAE,OAAO;AACjE,OAAG,iBAAiB,UAAU,QAAQ;AACtC,WAAO,MAAM,GAAG,oBAAoB,UAAU,QAAQ;AAAA,EACxD,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAaO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,UAAU,wBAAwB;AACxC,QAAM,QAAQ,gCAAkB,KAAK,CAAC,MAAM,EAAE,OAAO,IAAI;AACzD,MAAI,SAAS,yBAAW,IAAI;AAE5B,MAAI,CAAC,SAAS,CAAC,QAAQ;AAErB,YAAQ,KAAK,wDAAwD,IAAI,IAAI;AAC7E,WAAO;AAAA,EACT;AAEA,MAAI,SAAS;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM,OAAO;AAAA,QACnB,SAAS,MAAM,OAAO;AAAA,QACtB;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS,MAAM;AACjB,aAAS,OACN,QAAQ,mBAAmB,WAAW,KAAK,GAAG,EAC9C,QAAQ,oBAAoB,EAAE;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,eAAe,GAAG,MAAM;AAAA,MAC1C,yBAAyB,EAAE,QAAQ,OAAO;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AC5FA,IAAAC,SAAuB;AACvB,IAAAC,gBAMO;AAgED,IAAAC,sBAAA;AA7CN,SAASC,2BAAmC;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAU,gBAAS,IAAI;AACjD,EAAM,iBAAU,MAAM;AACpB,UAAM,KAAK,OAAO,WAAW,kCAAkC;AAC/D,eAAW,GAAG,OAAO;AACrB,UAAM,WAAW,CAAC,MAA2B,WAAW,EAAE,OAAO;AACjE,OAAG,iBAAiB,UAAU,QAAQ;AACtC,WAAO,MAAM,GAAG,oBAAoB,UAAU,QAAQ;AAAA,EACxD,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAoBO,SAAS,WAAW,EAAE,MAAM,OAAO,OAAO,GAAG,KAAK,GAAoB;AAC3E,QAAM,UAAUA,yBAAwB;AAExC,QAAM,QAAQ,6BAAe,KAAK,CAAC,MAAM,EAAE,OAAO,IAAI;AACtD,MAAI,SAAS,0BAAY,IAAI;AAE7B,MAAI,CAAC,SAAS,CAAC,QAAQ;AAErB,YAAQ,KAAK,sDAAsD,IAAI,IAAI;AAC3E,WAAO;AAAA,EACT;AAEA,MAAI,SAAS;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM,OAAO;AAAA,QACnB,SAAS,MAAM,OAAO;AAAA,QACtB;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS,MAAM;AACjB,aAAS,OACN,QAAQ,mBAAmB,WAAW,KAAK,GAAG,EAC9C,QAAQ,oBAAoB,EAAE;AAAA,EACnC;AAKA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,eAAe,GAAG,MAAM;AAAA,MAE1C,yBAAyB,EAAE,QAAQ,OAAO;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["Button","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React","import_brand","import_jsx_runtime","React","import_brand","import_jsx_runtime","usePrefersReducedMotion"]}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n name: LogoId;\n /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n variant?: LogoVariant;\n /**\n * Render width (px number or any CSS length). Height scales proportionally\n * via the SVG viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n const key = `${name}_${variant}` as LogoKey;\n let markup = svgs[key];\n\n if (!markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n return null;\n }\n\n if (width != null) {\n // Set width + drop height so the viewBox preserves the aspect ratio.\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // The SVG is generated, font-free, and carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n animations,\n animationManifest,\n type AnimationId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n extends React.HTMLAttributes<HTMLSpanElement> {\n /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n name: AnimationId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the animation's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n name,\n width,\n style,\n ...rest\n}: BrandAnimationProps) {\n const reduced = usePrefersReducedMotion();\n const entry = animationManifest.find((a) => a.id === name);\n let markup = animations[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the brand mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n navbarLogos,\n navbarManifest,\n type NavbarLogoId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n name: NavbarLogoId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n * start apart and the `i` slides onto the `a`. Plays once on mount; replays\n * on pointer-enter via a remount (`replayKey`).\n * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n const reduced = usePrefersReducedMotion();\n\n const entry = navbarManifest.find((n) => n.id === name);\n let markup = navbarLogos[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the superimposed mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n // The SVG is fully self-driving: it plays the assemble once on mount (its\n // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n // CSS — no remount/replay logic here (remounting is what caused the teleport).\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // Self-contained, font-free SVG; carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n"],"mappings":"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","names":["Button","jsx","jsx","jsxs","jsx","jsxs","jsx","React","jsx","React","jsx","usePrefersReducedMotion"]}
|
|
1
|
+
{"version":3,"sources":["../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate — themed via --color-interactive-accent\n (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n Literal fallback is the light-mode canonical for non-CSS consumers. */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #1f618d)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n name: LogoId;\n /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n variant?: LogoVariant;\n /**\n * Render width (px number or any CSS length). Height scales proportionally\n * via the SVG viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n const key = `${name}_${variant}` as LogoKey;\n let markup = svgs[key];\n\n if (!markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n return null;\n }\n\n if (width != null) {\n // Set width + drop height so the viewBox preserves the aspect ratio.\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // The SVG is generated, font-free, and carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n animations,\n animationManifest,\n type AnimationId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n extends React.HTMLAttributes<HTMLSpanElement> {\n /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n name: AnimationId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the animation's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n name,\n width,\n style,\n ...rest\n}: BrandAnimationProps) {\n const reduced = usePrefersReducedMotion();\n const entry = animationManifest.find((a) => a.id === name);\n let markup = animations[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the brand mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n navbarLogos,\n navbarManifest,\n type NavbarLogoId,\n type LogoId,\n type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n name: NavbarLogoId;\n /**\n * Render width (px number or any CSS length). Height scales via the SVG\n * viewBox. Omit to use the mark's intrinsic size.\n */\n width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = React.useState(true);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n setReduced(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n * start apart and the `i` slides onto the `a`. Plays once on mount; replays\n * on pointer-enter via a remount (`replayKey`).\n * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n const reduced = usePrefersReducedMotion();\n\n const entry = navbarManifest.find((n) => n.id === name);\n let markup = navbarLogos[name];\n\n if (!entry || !markup) {\n // eslint-disable-next-line no-console\n console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n return null;\n }\n\n if (reduced) {\n // Static settle-frame: the superimposed mark the animation resolves to.\n return (\n <Logo\n name={entry.poster.id as LogoId}\n variant={entry.poster.variant as LogoVariant}\n width={width}\n style={style}\n {...rest}\n />\n );\n }\n\n if (width != null) {\n markup = markup\n .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n .replace(/\\sheight=\"[^\"]*\"/, '');\n }\n\n // The SVG is fully self-driving: it plays the assemble once on mount (its\n // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n // CSS — no remount/replay logic here (remounting is what caused the teleport).\n return (\n <span\n style={{ display: 'inline-flex', ...style }}\n // Self-contained, font-free SVG; carries its own <title>/aria-label.\n dangerouslySetInnerHTML={{ __html: markup }}\n {...rest}\n />\n );\n}\n"],"mappings":"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","names":["Button","jsx","jsx","jsxs","jsx","jsxs","jsx","React","jsx","React","jsx","usePrefersReducedMotion"]}
|