@santi020k/lumen 0.3.0 → 0.4.0

package/README.md

@@ -15,6 +15,18 @@ umbrella package only when you want the framework-neutral CLI or registry APIs:
 pnpm add @santi020k/lumen
 ```
 
+## Typography
+
+Lumen defaults `--ui-font` to the canonical Santi020k Montserrat family stack:
+
+```css
+--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
+```
+
+The package declares the family but does not bundle or load font files. Applications should load
+Montserrat once through their preferred delivery path, or override `--ui-font` when using another
+typeface.
+
 The umbrella package also exposes typed registry metadata and the `lumen` CLI:
 
 ```bash

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { type ConsumerInventory, type ConsumerReference, type ConsumerRolloutOptions, type ConsumerRolloutReport, formatConsumerRollout, inspectLumenConsumer, type LumenFramework, runConsumerRollout, updateLumenManifestSource, updateLumenWorkspaceSource } from './consumer-rollout.js';
 export { addLumenRegistryItem, getLumenRegistryEntries, getLumenRegistryItem, loadLumenRegistry, type LumenAddOptions, type LumenAddResult, type LumenAddTarget, type LumenMergeConflict, type LumenRegistry, lumenRegistry, type LumenRegistryComponent, type LumenRegistryEntry, type LumenRegistryFile, type LumenRegistryItem, type LumenRegistryLoadOptions } from './registry.js';
-export { applyDataViewState, canPlaceScheduleEvent, coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createDataViewRequestUrl, createDataViewSearchParams, createDataViewServerRequest, createDataViewState, createDataViewStorageKey, createScheduleSlots, createScheduleStorageKey, createThemeBuilderTokens, createThemePalette, expandRecurringScheduleEvent, exportThemeBuilderCss, exportThemeBuilderValue, exportThemeCss, filterDataRecords, getContrastRatio, getScheduleConflicts, getVirtualRange, loadDataViewState, loadScheduleEvents, type LumenCodeToken, lumenCodeTokenClassNames, type LumenCodeTokenKind, lumenColors, type LumenColorTokenName, lumenColorTokenNames, type LumenComponentName, lumenComponentNames, type LumenContrastScore, lumenDarkTheme, type LumenDataRecord, type LumenDataViewServerRequest, type LumenDataViewState, lumenGlass, type LumenGlassColorTokenName, lumenGlassColorTokenNames, type LumenGlassEffectTokenName, lumenGlassEffectTokenNames, type LumenGlassTokenName, lumenGlassTokenNames, type LumenKeyValueReader, type LumenKeyValueStorage, type LumenKeyValueWriter, lumenLightTheme, lumenPackages, type LumenPackageTarget, type LumenScheduleConflict, type LumenScheduleEvent, type LumenScheduleKeyValueReader, type LumenScheduleKeyValueStorage, type LumenScheduleKeyValueWriter, type LumenScheduleResizeEdge, type LumenScheduleResizeOptions, type LumenScheduleResource, type LumenScheduleSlot, type LumenSemanticColorTokenName, lumenSemanticColorTokenNames, type LumenSortDirection, lumenThemeAttribute, type LumenThemeBuilderExportFormat, type LumenThemeBuilderMode, type LumenThemeBuilderOptions, type LumenThemeBuilderResult, type LumenThemeBuilderScheme, type LumenThemeContrastSuggestion, type LumenThemeTokens, lumenTokenNames, mergeThemeTokens, moveScheduleEvent, normalizeLumenCode, normalizeThemeBuilderHex, normalizeThemeBuilderHue, paginateDataRecords, parseDataViewState, parseScheduleEvents, parseThemeCss, pinDataViewColumn, renderLumenCodeHtml, resizeScheduleEvent, resizeScheduleEvents, saveDataViewState, saveScheduleEvents, scheduleEventsOverlap, scoreThemeContrast, serializeDataViewState, serializeScheduleEvents, sortDataRecords, suggestReadableInk, themeBuilderHexToHsl, toggleDataViewSelection, tokenizeLumenCode, tuneThemeContrast, unpinDataViewColumn } from '@santi020k/lumen-core';
+export { alignLumenChartSeries, applyDataViewState, canPlaceScheduleEvent, coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createDataViewRequestUrl, createDataViewSearchParams, createDataViewServerRequest, createDataViewState, createDataViewStorageKey, createLumenBarGeometry, createLumenLineGeometry, createLumenPieGeometry, createScheduleSlots, createScheduleStorageKey, createThemeBuilderTokens, createThemePalette, expandRecurringScheduleEvent, exportThemeBuilderCss, exportThemeBuilderValue, exportThemeCss, filterDataRecords, getContrastRatio, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartValueRatio, getScheduleConflicts, getVirtualRange, hasLumenPieData, loadDataViewState, loadScheduleEvents, type LumenBarChartLayout, type LumenBarGeometry, type LumenBarGeometryCategory, type LumenBarGeometryMark, type LumenBarGeometryOptions, lumenChart, type LumenChartDatum, type LumenChartDomain, type LumenChartGeometryPoint, type LumenChartOrientation, type LumenChartSeries, type LumenChartTone, lumenChartTones, type LumenCodeToken, lumenCodeTokenClassNames, type LumenCodeTokenKind, lumenColors, type LumenColorTokenName, lumenColorTokenNames, type LumenComponentName, lumenComponentNames, type LumenContrastScore, lumenDarkTheme, type LumenDataRecord, type LumenDataViewServerRequest, type LumenDataViewState, lumenGlass, type LumenGlassColorTokenName, lumenGlassColorTokenNames, type LumenGlassEffectTokenName, lumenGlassEffectTokenNames, type LumenGlassTokenName, lumenGlassTokenNames, type LumenKeyValueReader, type LumenKeyValueStorage, type LumenKeyValueWriter, lumenLightTheme, type LumenLineGeometry, type LumenLineGeometryOptions, lumenPackages, type LumenPackageTarget, type LumenPieChartVariant, type LumenPieGeometry, type LumenPieGeometryOptions, type LumenPieGeometrySlice, type LumenScheduleConflict, type LumenScheduleEvent, type LumenScheduleKeyValueReader, type LumenScheduleKeyValueStorage, type LumenScheduleKeyValueWriter, type LumenScheduleResizeEdge, type LumenScheduleResizeOptions, type LumenScheduleResource, type LumenScheduleSlot, type LumenSemanticColorTokenName, lumenSemanticColorTokenNames, type LumenSortDirection, lumenThemeAttribute, type LumenThemeBuilderExportFormat, type LumenThemeBuilderMode, type LumenThemeBuilderOptions, type LumenThemeBuilderResult, type LumenThemeBuilderScheme, type LumenThemeContrastSuggestion, type LumenThemeTokens, lumenTokenNames, mergeThemeTokens, moveScheduleEvent, normalizeLumenCode, normalizeThemeBuilderHex, normalizeThemeBuilderHue, paginateDataRecords, parseDataViewState, parseScheduleEvents, parseThemeCss, pinDataViewColumn, renderLumenCodeHtml, resizeScheduleEvent, resizeScheduleEvents, resolveLumenChartTone, saveDataViewState, saveScheduleEvents, scaleLumenChartValue, scheduleEventsOverlap, scoreThemeContrast, serializeDataViewState, serializeScheduleEvents, sortDataRecords, suggestReadableInk, themeBuilderHexToHsl, toggleDataViewSelection, tokenizeLumenCode, tuneThemeContrast, unpinDataViewColumn } from '@santi020k/lumen-core';
 export declare const lumen: {
     readonly name: "Lumen";
     readonly packageName: "@santi020k/lumen";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,cAAc,EACnB,kBAAkB,EAClB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,gBAAgB,EAChB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,cAAc,EACnB,wBAAwB,EACxB,KAAK,kBAAkB,EACvB,WAAW,EACX,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,UAAU,EACV,KAAK,wBAAwB,EAC7B,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,0BAA0B,EAC1B,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,eAAe,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EAChC,4BAA4B,EAC5B,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,gBAAgB,EACrB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAE9B,eAAO,MAAM,KAAK;;;;CAIR,CAAA;AAEV,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,6 @@
 export { formatConsumerRollout, inspectLumenConsumer, runConsumerRollout, updateLumenManifestSource, updateLumenWorkspaceSource } from './consumer-rollout.js';
 export { addLumenRegistryItem, getLumenRegistryEntries, getLumenRegistryItem, loadLumenRegistry, lumenRegistry } from './registry.js';
-export { applyDataViewState, canPlaceScheduleEvent, coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createDataViewRequestUrl, createDataViewSearchParams, createDataViewServerRequest, createDataViewState, createDataViewStorageKey, createScheduleSlots, createScheduleStorageKey, createThemeBuilderTokens, createThemePalette, expandRecurringScheduleEvent, exportThemeBuilderCss, exportThemeBuilderValue, exportThemeCss, filterDataRecords, getContrastRatio, getScheduleConflicts, getVirtualRange, loadDataViewState, loadScheduleEvents, lumenCodeTokenClassNames, lumenColors, lumenColorTokenNames, lumenComponentNames, lumenDarkTheme, lumenGlass, lumenGlassColorTokenNames, lumenGlassEffectTokenNames, lumenGlassTokenNames, lumenLightTheme, lumenPackages, lumenSemanticColorTokenNames, lumenThemeAttribute, lumenTokenNames, mergeThemeTokens, moveScheduleEvent, normalizeLumenCode, normalizeThemeBuilderHex, normalizeThemeBuilderHue, paginateDataRecords, parseDataViewState, parseScheduleEvents, parseThemeCss, pinDataViewColumn, renderLumenCodeHtml, resizeScheduleEvent, resizeScheduleEvents, saveDataViewState, saveScheduleEvents, scheduleEventsOverlap, scoreThemeContrast, serializeDataViewState, serializeScheduleEvents, sortDataRecords, suggestReadableInk, themeBuilderHexToHsl, toggleDataViewSelection, tokenizeLumenCode, tuneThemeContrast, unpinDataViewColumn } from '@santi020k/lumen-core';
+export { alignLumenChartSeries, applyDataViewState, canPlaceScheduleEvent, coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createDataViewRequestUrl, createDataViewSearchParams, createDataViewServerRequest, createDataViewState, createDataViewStorageKey, createLumenBarGeometry, createLumenLineGeometry, createLumenPieGeometry, createScheduleSlots, createScheduleStorageKey, createThemeBuilderTokens, createThemePalette, expandRecurringScheduleEvent, exportThemeBuilderCss, exportThemeBuilderValue, exportThemeCss, filterDataRecords, getContrastRatio, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartValueRatio, getScheduleConflicts, getVirtualRange, hasLumenPieData, loadDataViewState, loadScheduleEvents, lumenChart, lumenChartTones, lumenCodeTokenClassNames, lumenColors, lumenColorTokenNames, lumenComponentNames, lumenDarkTheme, lumenGlass, lumenGlassColorTokenNames, lumenGlassEffectTokenNames, lumenGlassTokenNames, lumenLightTheme, lumenPackages, lumenSemanticColorTokenNames, lumenThemeAttribute, lumenTokenNames, mergeThemeTokens, moveScheduleEvent, normalizeLumenCode, normalizeThemeBuilderHex, normalizeThemeBuilderHue, paginateDataRecords, parseDataViewState, parseScheduleEvents, parseThemeCss, pinDataViewColumn, renderLumenCodeHtml, resizeScheduleEvent, resizeScheduleEvents, resolveLumenChartTone, saveDataViewState, saveScheduleEvents, scaleLumenChartValue, scheduleEventsOverlap, scoreThemeContrast, serializeDataViewState, serializeScheduleEvents, sortDataRecords, suggestReadableInk, themeBuilderHexToHsl, toggleDataViewSelection, tokenizeLumenCode, tuneThemeContrast, unpinDataViewColumn } from '@santi020k/lumen-core';
 export const lumen = {
     name: 'Lumen',
     packageName: '@santi020k/lumen',

package/dist/registry-data.d.ts

@@ -27,6 +27,10 @@ export declare const lumenRegistry: {
         readonly name: "rich-text-editor";
         readonly type: "recipe";
         readonly components: readonly ["RichTextEditor", "ButtonGroup", "ToggleGroup", "Textarea"];
+    }, {
+        readonly name: "data-visualization";
+        readonly type: "recipe";
+        readonly components: readonly ["Chart", "Sparkline", "BarChart", "LineChart", "PieChart", "Stat", "Meter"];
     }, {
         readonly name: "ai-docs";
         readonly type: "documentation";
@@ -106,6 +110,13 @@ export declare const lumenRegistry: {
         readonly category: "Data display";
         readonly files: readonly ["packages/astro/components/Badge.astro", "packages/astro/styles/lumen.css"];
         readonly dependencies: readonly ["styles"];
+    }, {
+        readonly name: "BarChart";
+        readonly type: "component";
+        readonly description: "Compares categorical or discrete-period values with grouped and stacked bars.";
+        readonly category: "Data display";
+        readonly files: readonly ["packages/astro/components/BarChart.astro", "packages/astro/components/Chart.astro", "packages/astro/styles/lumen.css"];
+        readonly dependencies: readonly ["Chart", "styles"];
     }, {
         readonly name: "Breadcrumb";
         readonly type: "component";
@@ -379,6 +390,13 @@ export declare const lumenRegistry: {
         readonly category: "Navigation";
         readonly files: readonly ["packages/astro/components/Link.astro", "packages/astro/styles/lumen.css"];
         readonly dependencies: readonly ["styles"];
+    }, {
+        readonly name: "LineChart";
+        readonly type: "component";
+        readonly description: "Shows ordered trends, multiple series, missing-value gaps, areas, markers, and reference values.";
+        readonly category: "Data display";
+        readonly files: readonly ["packages/astro/components/LineChart.astro", "packages/astro/components/Chart.astro", "packages/astro/styles/lumen.css"];
+        readonly dependencies: readonly ["Chart", "styles"];
     }, {
         readonly name: "Marker";
         readonly type: "component";
@@ -442,6 +460,13 @@ export declare const lumenRegistry: {
         readonly category: "Forms";
         readonly files: readonly ["packages/astro/components/PhoneInput.astro", "packages/astro/styles/lumen.css"];
         readonly dependencies: readonly ["Input", "NativeSelect", "styles"];
+    }, {
+        readonly name: "PieChart";
+        readonly type: "component";
+        readonly description: "Shows part-to-whole relationships as an accessible donut or pie chart.";
+        readonly category: "Data display";
+        readonly files: readonly ["packages/astro/components/PieChart.astro", "packages/astro/components/Chart.astro", "packages/astro/styles/lumen.css"];
+        readonly dependencies: readonly ["Chart", "styles"];
     }, {
         readonly name: "Pill";
         readonly type: "component";
@@ -498,6 +523,13 @@ export declare const lumenRegistry: {
         readonly category: "Layout";
         readonly files: readonly ["packages/astro/components/ScrollArea.astro", "packages/astro/styles/lumen.css"];
         readonly dependencies: readonly ["styles"];
+    }, {
+        readonly name: "ScrollProgress";
+        readonly type: "component";
+        readonly description: "Shows how far a reader has progressed through the current document.";
+        readonly category: "Feedback";
+        readonly files: readonly ["packages/astro/components/ScrollProgress.astro", "packages/astro/styles/lumen.css", "packages/astro/runtime/UIPrimitives.astro"];
+        readonly dependencies: readonly ["styles", "runtime"];
     }, {
         readonly name: "Schedule";
         readonly type: "component";
@@ -568,6 +600,13 @@ export declare const lumenRegistry: {
         readonly category: "Feedback";
         readonly files: readonly ["packages/astro/components/Sonner.astro", "packages/astro/styles/lumen.css", "packages/astro/runtime/UIPrimitives.astro"];
         readonly dependencies: readonly ["styles", "runtime"];
+    }, {
+        readonly name: "Sparkline";
+        readonly type: "component";
+        readonly description: "Shows a compact, text-labelled trend beside an existing metric.";
+        readonly category: "Data display";
+        readonly files: readonly ["packages/astro/components/Sparkline.astro", "packages/astro/styles/lumen.css"];
+        readonly dependencies: readonly ["styles"];
     }, {
         readonly name: "Spinner";
         readonly type: "component";

package/dist/registry-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry-data.d.ts","sourceRoot":"","sources":["../src/registry-data.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4sDQ,CAAA"}
+{"version":3,"file":"registry-data.d.ts","sourceRoot":"","sources":["../src/registry-data.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkyDQ,CAAA"}

package/dist/registry-data.js

@@ -75,6 +75,19 @@ export const lumenRegistry = {
                 "Textarea"
             ]
         },
+        {
+            "name": "data-visualization",
+            "type": "recipe",
+            "components": [
+                "Chart",
+                "Sparkline",
+                "BarChart",
+                "LineChart",
+                "PieChart",
+                "Stat",
+                "Meter"
+            ]
+        },
         {
             "name": "ai-docs",
             "type": "documentation",
@@ -229,6 +242,21 @@ export const lumenRegistry = {
                 "styles"
             ]
         },
+        {
+            "name": "BarChart",
+            "type": "component",
+            "description": "Compares categorical or discrete-period values with grouped and stacked bars.",
+            "category": "Data display",
+            "files": [
+                "packages/astro/components/BarChart.astro",
+                "packages/astro/components/Chart.astro",
+                "packages/astro/styles/lumen.css"
+            ],
+            "dependencies": [
+                "Chart",
+                "styles"
+            ]
+        },
         {
             "name": "Breadcrumb",
             "type": "component",
@@ -787,6 +815,21 @@ export const lumenRegistry = {
                 "styles"
             ]
         },
+        {
+            "name": "LineChart",
+            "type": "component",
+            "description": "Shows ordered trends, multiple series, missing-value gaps, areas, markers, and reference values.",
+            "category": "Data display",
+            "files": [
+                "packages/astro/components/LineChart.astro",
+                "packages/astro/components/Chart.astro",
+                "packages/astro/styles/lumen.css"
+            ],
+            "dependencies": [
+                "Chart",
+                "styles"
+            ]
+        },
         {
             "name": "Marker",
             "type": "component",
@@ -916,6 +959,21 @@ export const lumenRegistry = {
                 "styles"
             ]
         },
+        {
+            "name": "PieChart",
+            "type": "component",
+            "description": "Shows part-to-whole relationships as an accessible donut or pie chart.",
+            "category": "Data display",
+            "files": [
+                "packages/astro/components/PieChart.astro",
+                "packages/astro/components/Chart.astro",
+                "packages/astro/styles/lumen.css"
+            ],
+            "dependencies": [
+                "Chart",
+                "styles"
+            ]
+        },
         {
             "name": "Pill",
             "type": "component",
@@ -1032,6 +1090,21 @@ export const lumenRegistry = {
                 "styles"
             ]
         },
+        {
+            "name": "ScrollProgress",
+            "type": "component",
+            "description": "Shows how far a reader has progressed through the current document.",
+            "category": "Feedback",
+            "files": [
+                "packages/astro/components/ScrollProgress.astro",
+                "packages/astro/styles/lumen.css",
+                "packages/astro/runtime/UIPrimitives.astro"
+            ],
+            "dependencies": [
+                "styles",
+                "runtime"
+            ]
+        },
         {
             "name": "Schedule",
             "type": "component",
@@ -1172,6 +1245,19 @@ export const lumenRegistry = {
                 "runtime"
             ]
         },
+        {
+            "name": "Sparkline",
+            "type": "component",
+            "description": "Shows a compact, text-labelled trend beside an existing metric.",
+            "category": "Data display",
+            "files": [
+                "packages/astro/components/Sparkline.astro",
+                "packages/astro/styles/lumen.css"
+            ],
+            "dependencies": [
+                "styles"
+            ]
+        },
         {
             "name": "Spinner",
             "type": "component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "semver": "^7.8.0",
-    "@santi020k/lumen-core": "^0.3.0"
+    "@santi020k/lumen-core": "^0.4.0"
   },
   "devDependencies": {
     "@types/node": "^26.1.1",

package/styles.css

@@ -26,6 +26,22 @@
   --success: 142 71% 36%;
   --warning: 38 92% 50%;
   --danger: 0 84% 60%;
+  --chart-axis: var(--ink-muted);
+  --chart-diverging-mid: 220 13% 91%;
+  --chart-diverging-negative: 0 84% 60%;
+  --chart-diverging-positive: 221 83% 53%;
+  --chart-grid: var(--line);
+  --chart-sequential-high: 221 83% 40%;
+  --chart-sequential-low: 218 100% 97%;
+  --chart-sequential-mid: 221 83% 67%;
+  --chart-series-1: 221 83% 53%;
+  --chart-series-2: 168 76% 36%;
+  --chart-series-3: 280 72% 56%;
+  --chart-series-4: 25 95% 53%;
+  --chart-series-5: 340 82% 55%;
+  --chart-series-6: 190 82% 42%;
+  --chart-series-7: 52 92% 45%;
+  --chart-series-8: 215 16% 47%;
   --ui-on-danger: 0 0% 0%;
   --ui-radius: 0.625rem;
   --ui-radius-sm: 0.375rem;
@@ -49,7 +65,7 @@
     0 1px 2px hsl(222 47% 11% / 0.08),
     0 12px 32px hsl(222 47% 11% / 0.12),
     0 32px 80px hsl(222 47% 11% / 0.14);
-  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
   --ui-duration-fast: 120ms;
   --ui-duration: 160ms;
   --ui-duration-slow: 300ms;
@@ -75,6 +91,22 @@
   --success: 142 69% 45%;
   --warning: 38 92% 55%;
   --danger: 0 84% 65%;
+  --chart-axis: var(--ink-muted);
+  --chart-diverging-mid: 222 14% 22%;
+  --chart-diverging-negative: 0 84% 65%;
+  --chart-diverging-positive: 199 91% 56%;
+  --chart-grid: var(--line);
+  --chart-sequential-high: 199 91% 66%;
+  --chart-sequential-low: 199 84% 16%;
+  --chart-sequential-mid: 199 72% 42%;
+  --chart-series-1: 199 91% 56%;
+  --chart-series-2: 166 76% 43%;
+  --chart-series-3: 285 82% 72%;
+  --chart-series-4: 31 96% 62%;
+  --chart-series-5: 342 88% 68%;
+  --chart-series-6: 188 86% 54%;
+  --chart-series-7: 52 94% 58%;
+  --chart-series-8: 215 18% 68%;
   --ui-on-danger: var(--canvas);
   --ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
   --ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
@@ -243,6 +275,7 @@
   .ui-skeleton,
   .ui-slider,
   .ui-sonner,
+  .ui-sparkline,
   .ui-spinner,
   .ui-switch,
   .ui-table-wrap,
@@ -957,21 +990,20 @@
   min-height: 12rem;
   overflow: hidden;
   border-radius: var(--ui-radius-lg);
-  background-color: hsl(var(--surface-muted));
-  background-image:
-    radial-gradient(circle, hsl(var(--brand) / 0.34) 0 2px, transparent 2.5px),
-    radial-gradient(circle, hsl(var(--accent) / 0.28) 0 1.5px, transparent 2px),
-    radial-gradient(circle, hsl(var(--ink) / 0.14) 0 1px, transparent 1.5px);
-  background-position: 1rem 1rem, 3.5rem 2.5rem, 6rem 4rem;
-  background-size: 7rem 7rem, 9rem 9rem, 5rem 5rem;
-}
-
-.ui-particles[data-ui-particles="low"] {
-  background-size: 11rem 11rem, 14rem 14rem, 9rem 9rem;
+  background: transparent;
 }
 
-.ui-particles[data-ui-particles="high"] {
-  background-size: 4.5rem 4.5rem, 6rem 6rem, 3.5rem 3.5rem;
+.ui-particles__particle {
+  position: absolute;
+  top: var(--ui-particle-top);
+  left: var(--ui-particle-left);
+  width: var(--ui-particle-size);
+  height: var(--ui-particle-size);
+  border-radius: 50%;
+  background: hsl(var(--ui-particle-tone) / 0.25);
+  box-shadow: 0 0 var(--ui-particle-size) hsl(var(--ui-particle-tone) / 0.15);
+  opacity: 0;
+  animation: ui-particle-drift var(--ui-particle-duration) ease-in-out var(--ui-particle-delay) infinite;
 }
 
 .ui-motion-duration-fast {
@@ -3393,6 +3425,11 @@
   gap: 0.75rem;
 }
 
+.ui-chart__heading {
+  display: grid;
+  gap: 0.25rem;
+}
+
 .ui-chart h2,
 .ui-chart h3,
 .ui-chart p {
@@ -3413,6 +3450,24 @@
   color: hsl(var(--brand));
 }
 
+.ui-chart__plot {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.ui-chart__empty {
+  min-height: 10rem;
+  display: grid;
+  margin: 0;
+  color: hsl(var(--ink-muted));
+  place-items: center;
+  text-align: center;
+}
+
+.ui-chart__plot > svg {
+  min-width: 32rem;
+}
+
 .ui-chart svg :where(path, polyline, line) {
   vector-effect: non-scaling-stroke;
   stroke-linecap: round;
@@ -3425,6 +3480,273 @@
   line-height: 1.5;
 }
 
+.ui-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  margin: 0;
+  padding: 0;
+  color: hsl(var(--ink-soft));
+  font-size: 0.75rem;
+  list-style: none;
+}
+
+.ui-chart__legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.ui-chart__legend li > span {
+  width: 0.65rem;
+  height: 0.65rem;
+  border: 2px solid var(--ui-chart-color);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ui-chart-color) 30%, transparent);
+}
+
+.ui-chart__grid line {
+  stroke: hsl(var(--chart-grid) / 0.72);
+  stroke-width: 1;
+}
+
+.ui-chart__grid text,
+.ui-chart__axis-labels text {
+  fill: hsl(var(--chart-axis));
+  font-size: 0.6875rem;
+}
+
+.ui-chart__grid text {
+  dominant-baseline: middle;
+  text-anchor: end;
+}
+
+.ui-chart__reference {
+  stroke: hsl(var(--ink-muted));
+  stroke-dasharray: 5 5;
+  stroke-width: 1.5;
+}
+
+.ui-chart__data {
+  border-top: 1px solid hsl(var(--line));
+  color: hsl(var(--ink-soft));
+  font-size: 0.8125rem;
+  padding-block-start: 0.75rem;
+}
+
+.ui-chart__data summary {
+  width: fit-content;
+  border-radius: var(--ui-radius-sm);
+  color: hsl(var(--brand));
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.ui-chart__data summary:focus-visible {
+  outline: 2px solid hsl(var(--brand) / 0.72);
+  outline-offset: 0.2rem;
+}
+
+.ui-chart__data > div {
+  overflow-x: auto;
+  margin-block-start: 0.75rem;
+}
+
+.ui-chart__data table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.ui-chart__data :where(th, td) {
+  border-bottom: 1px solid hsl(var(--line));
+  padding: 0.5rem;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.ui-chart__data :where(th, td):first-child {
+  text-align: start;
+}
+
+.ui-chart__data th {
+  color: hsl(var(--ink));
+  font-weight: 700;
+}
+
+.ui-chart-tone--series-1 {
+  --ui-chart-color: hsl(var(--chart-series-1));
+}
+
+.ui-chart-tone--series-2 {
+  --ui-chart-color: hsl(var(--chart-series-2));
+}
+
+.ui-chart-tone--series-3 {
+  --ui-chart-color: hsl(var(--chart-series-3));
+}
+
+.ui-chart-tone--series-4 {
+  --ui-chart-color: hsl(var(--chart-series-4));
+}
+
+.ui-chart-tone--series-5 {
+  --ui-chart-color: hsl(var(--chart-series-5));
+}
+
+.ui-chart-tone--series-6 {
+  --ui-chart-color: hsl(var(--chart-series-6));
+}
+
+.ui-chart-tone--series-7 {
+  --ui-chart-color: hsl(var(--chart-series-7));
+}
+
+.ui-chart-tone--series-8 {
+  --ui-chart-color: hsl(var(--chart-series-8));
+}
+
+.ui-chart-tone--brand {
+  --ui-chart-color: hsl(var(--brand));
+}
+
+.ui-chart-tone--accent {
+  --ui-chart-color: hsl(var(--accent));
+}
+
+.ui-chart-tone--success {
+  --ui-chart-color: hsl(var(--success));
+}
+
+.ui-chart-tone--warning {
+  --ui-chart-color: hsl(var(--warning));
+}
+
+.ui-chart-tone--danger {
+  --ui-chart-color: hsl(var(--danger));
+}
+
+.ui-chart-tone--neutral {
+  --ui-chart-color: hsl(var(--ink-muted));
+}
+
+.ui-bar-chart__marks rect {
+  fill: var(--ui-chart-color);
+}
+
+.ui-pie-chart__plot {
+  position: relative;
+  display: grid;
+  overflow: visible;
+  place-items: center;
+}
+
+.ui-pie-chart__plot > svg {
+  z-index: 0;
+  grid-area: 1 / 1;
+  width: min(100%, 20rem);
+  min-width: 0;
+  min-height: 0;
+  aspect-ratio: 1;
+}
+
+.ui-pie-chart__slices path {
+  fill: var(--ui-chart-color);
+  stroke: hsl(var(--surface));
+  stroke-width: 2;
+}
+
+.ui-pie-chart__center {
+  z-index: 1;
+  display: grid;
+  grid-area: 1 / 1;
+  max-width: 7rem;
+  gap: 0.2rem;
+  place-items: center;
+  text-align: center;
+  pointer-events: none;
+}
+
+.ui-pie-chart__center strong {
+  color: hsl(var(--ink));
+  font-size: clamp(1.35rem, 5vw, 2rem);
+  line-height: 1;
+}
+
+.ui-pie-chart__center span {
+  color: hsl(var(--ink-muted));
+  font-size: 0.75rem;
+  line-height: 1.25;
+}
+
+.ui-line-chart__line,
+.ui-sparkline__line {
+  fill: none;
+  stroke: var(--ui-chart-color);
+  stroke-width: 2.5;
+}
+
+.ui-line-chart__area,
+.ui-sparkline__area {
+  fill: color-mix(in srgb, var(--ui-chart-color) 18%, transparent);
+  stroke: none;
+}
+
+.ui-line-chart__point,
+.ui-sparkline__endpoint {
+  fill: hsl(var(--surface));
+  stroke: var(--ui-chart-color);
+  stroke-width: 2;
+}
+
+.ui-line-chart__series.ui-chart-tone--series-2 .ui-line-chart__line {
+  stroke-dasharray: 8 5;
+}
+
+.ui-line-chart__series.ui-chart-tone--series-3 .ui-line-chart__line {
+  stroke-dasharray: 3 4;
+}
+
+.ui-line-chart__series.ui-chart-tone--series-4 .ui-line-chart__line {
+  stroke-dasharray: 10 4 2 4;
+}
+
+.ui-line-chart__series:is(
+  .ui-chart-tone--series-5,
+  .ui-chart-tone--series-6,
+  .ui-chart-tone--series-7,
+  .ui-chart-tone--series-8
+) .ui-line-chart__line {
+  stroke-dasharray: 2 5;
+}
+
+.ui-sparkline {
+  display: inline-flex;
+  width: 8rem;
+  height: 2.5rem;
+  color: hsl(var(--ink));
+}
+
+.ui-sparkline svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ui-pie-chart__slices path {
+    transition:
+      opacity var(--ui-duration-fast) var(--ui-ease),
+      transform var(--ui-duration-fast) var(--ui-ease);
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+  .ui-pie-chart__slices path:hover {
+    transform: scale(1.025);
+  }
+}
+
 .ui-sonner {
   position: fixed;
   z-index: 50;
@@ -4053,6 +4375,7 @@
 .ui-date-picker-field--glass .ui-date-picker__popover,
 .ui-select-field--glass .ui-select__list,
 .ui-sidebar--glass,
+.ui-stat--glass,
 .ui-table-wrap--glass,
 .ui-tabs--glass,
 .ui-theme-builder--glass,
@@ -4250,6 +4573,7 @@
   .ui-date-picker-field--glass .ui-date-picker__popover,
   .ui-select-field--glass .ui-select__list,
   .ui-sidebar--glass,
+  .ui-stat--glass,
   .ui-table-wrap--glass,
   .ui-tabs--glass,
   .ui-theme-builder--glass,
@@ -4706,10 +5030,10 @@
     opacity: 0;
   }
   10% {
-    opacity: 0.15;
+    opacity: 0.9;
   }
   90% {
-    opacity: 0.1;
+    opacity: 0.7;
   }
   100% {
     transform: translateY(-100vh) translateX(20px);
@@ -4717,6 +5041,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ui-particles__particle {
+    display: none;
+    animation: none;
+  }
+}
+
 .ui-stat {
   display: flex;
   flex-direction: column;
@@ -4726,6 +5057,32 @@
   border: 1px solid hsl(var(--line));
   border-radius: 0.5rem;
 }
+
+.ui-stat--accent,
+.ui-stat--glass {
+  gap: 0.5rem;
+  padding: 1.25rem;
+  border-radius: var(--ui-radius-lg);
+}
+
+.ui-stat--accent {
+  border-color: hsl(var(--brand) / 0.2);
+  background: linear-gradient(145deg, hsl(var(--surface)), hsl(var(--brand-soft) / 0.28));
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.ui-stat--accent .ui-stat-value,
+.ui-stat--glass .ui-stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+.ui-stat--accent .ui-stat-value {
+  color: hsl(var(--brand));
+}
+
 .ui-stat-label {
   font-size: 0.875rem;
   color: hsl(var(--ink-muted));
@@ -4890,6 +5247,17 @@
   white-space: nowrap;
 }
 
+.ui-pill--brand {
+  border-color: hsl(var(--brand) / 0.34);
+  background: hsl(var(--brand-soft) / 0.72);
+  color: hsl(var(--brand));
+}
+
+.ui-pill--outline {
+  background: transparent;
+  color: hsl(var(--ink-soft));
+}
+
 .ui-pill__count {
   margin-left: 0.5rem;
   padding-left: 0.5rem;
@@ -4902,6 +5270,7 @@
 
 a.ui-pill {
   cursor: pointer;
+  min-height: 2.75rem;
   text-decoration: none;
 }
 
@@ -4910,6 +5279,47 @@ a.ui-pill:hover {
   color: hsl(var(--brand-solid));
 }
 
+a.ui-pill--brand:hover {
+  border-color: hsl(var(--brand) / 0.6);
+  background: hsl(var(--brand-solid));
+  color: hsl(var(--canvas));
+}
+
+a.ui-pill:focus-visible {
+  outline: 2px solid hsl(var(--brand));
+  outline-offset: 2px;
+}
+
+.ui-scroll-progress {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 9999;
+  height: 0.1875rem;
+  overflow: hidden;
+  pointer-events: none;
+  background: hsl(var(--surface-strong) / 0.48);
+}
+
+.ui-scroll-progress--bottom {
+  inset: auto 0 0;
+}
+
+.ui-scroll-progress__bar {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(0);
+  transform-origin: left;
+  background: hsl(var(--brand-solid));
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-scroll-progress__bar {
+    transition: none;
+  }
+}
+
 /* CoverImage hover lift + bottom gradient overlay */
 .ui-cover-image--hover {
   transition: transform 300ms ease;
@@ -5249,6 +5659,16 @@ a.ui-pill:hover {
   text-decoration: none;
   font-size: 0.875rem;
 }
+.ui-anchor a[data-depth="3"] {
+  padding-inline-start: 1.5rem;
+  font-size: 0.8125rem;
+}
+.ui-anchor a[data-depth="4"],
+.ui-anchor a[data-depth="5"],
+.ui-anchor a[data-depth="6"] {
+  padding-inline-start: 2.25rem;
+  font-size: 0.8125rem;
+}
 .ui-anchor a:hover {
   color: hsl(var(--ink));
 }