@byline/ui 2.5.2 → 2.6.1

package/dist/components/shimmer/shimmer.d.ts

@@ -2,11 +2,23 @@ import type React from 'react';
 interface ShimmerProps {
     className?: string;
     width?: string | number;
+    /**
+     * Height of the bar. For the single-bar variants (`rectangular`,
+     * `circular`, and single-line `text`) this sizes the bar itself. For the
+     * multi-line text variant (`variant="text"` with `lines > 1`) it sizes the
+     * container that holds the lines — use `lineHeight` to size each line.
+     */
     height?: string | number;
+    /**
+     * Height of each line in the multi-line text variant (`variant="text"`
+     * with `lines > 1`). Falls back to the `.text` class height (1rem) when
+     * omitted. Ignored by the single-bar variants — use `height` there.
+     */
+    lineHeight?: string | number;
     borderRadius?: string;
     variant?: 'text' | 'rectangular' | 'circular';
     lines?: number;
     children?: React.ReactNode;
 }
-export declare function Shimmer({ className, width, height, borderRadius, variant, lines, children, ...other }: ShimmerProps): React.JSX.Element;
+export declare function Shimmer({ className, width, height, lineHeight, borderRadius, variant, lines, children, ...other }: ShimmerProps): React.JSX.Element;
 export {};

package/dist/components/shimmer/shimmer.js

@@ -1,12 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import shimmer_module from "./shimmer.module.js";
-function Shimmer({ className, width = '100%', height = '1rem', borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
-    const shimmerStyle = {
-        width: 'number' == typeof width ? `${width}px` : width,
-        height: 'number' == typeof height ? `${height}px` : height,
-        borderRadius: borderRadius
-    };
+const toCssSize = (value)=>'number' == typeof value ? `${value}px` : value;
+function Shimmer({ className, width = '100%', height, lineHeight, borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
     const getVariantClass = ()=>{
         switch(variant){
             case 'text':
@@ -17,20 +13,33 @@ function Shimmer({ className, width = '100%', height = '1rem', borderRadius, var
                 return shimmer_module.rectangular;
         }
     };
-    if ('text' === variant && lines > 1) return /*#__PURE__*/ jsx("div", {
-        className: classnames(shimmer_module.shimmerContainer, className),
-        ...other,
-        children: Array.from({
-            length: lines
-        }, (_, index)=>/*#__PURE__*/ jsx("div", {
-                className: classnames(shimmer_module.shimmer, shimmer_module.text),
-                style: {
-                    ...shimmerStyle,
-                    width: index === lines - 1 ? '75%' : '100%',
-                    marginBottom: index === lines - 1 ? 0 : '0.5rem'
-                }
-            }, `shimmer-line-${index}`))
-    });
+    if ('text' === variant && lines > 1) {
+        const resolvedLineHeight = toCssSize(lineHeight);
+        return /*#__PURE__*/ jsx("div", {
+            className: classnames(shimmer_module.shimmerContainer, className),
+            style: {
+                width: toCssSize(width),
+                height: toCssSize(height)
+            },
+            ...other,
+            children: Array.from({
+                length: lines
+            }, (_, index)=>/*#__PURE__*/ jsx("div", {
+                    className: classnames(shimmer_module.shimmer, shimmer_module.text),
+                    style: {
+                        width: index === lines - 1 ? '75%' : '100%',
+                        height: resolvedLineHeight,
+                        borderRadius,
+                        marginBottom: index === lines - 1 ? 0 : '0.5rem'
+                    }
+                }, `shimmer-line-${index}`))
+        });
+    }
+    const shimmerStyle = {
+        width: toCssSize(width),
+        height: toCssSize(height) ?? '1rem',
+        borderRadius
+    };
     return /*#__PURE__*/ jsx("div", {
         className: classnames(shimmer_module.shimmer, getVariantClass(), className),
         style: shimmerStyle,

package/dist/components/shimmer/shimmer_module.css

@@ -2,8 +2,8 @@
 
 @layer byline-components {
   :is(.shimmer-hQj5gn, .byline-shimmer) {
-    background-color: #f0f0f0;
-    background-image: linear-gradient(90deg, #0000, #fff9, #0000);
+    background-color: var(--surface-shimmer);
+    background-image: linear-gradient(90deg, #0000, #ffffffb3, #0000);
     background-size: 200% 100%;
     animation: 1.5s infinite shimmer-hQj5gn;
     position: relative;
@@ -11,13 +11,13 @@
   }
 
   :is(:is(.dark, [data-theme="dark"]) .shimmer-hQj5gn, :is(.dark, [data-theme="dark"]) .byline-shimmer) {
-    background-color: #141414;
-    background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
+    background-image: linear-gradient(90deg, #0000, #ffffff0a, #0000);
   }
 
   :is(.shimmerContainer-YqBAXa, .byline-shimmer-container) {
     flex-direction: column;
     display: flex;
+    overflow: hidden;
   }
 
   :is(.rectangular-qx6oTl, .byline-shimmer-rectangular) {

package/dist/dnd/draggable-sortable/demo/draggable-list-demo.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Card, GripperVerticalIcon } from "@byline/ui/react";
 import classnames from "classnames";
-import { Card, GripperVerticalIcon } from "../../../uikit.js";
 import { DraggableSortable, moveItem, useSortable } from "../index.js";
 import draggable_list_demo_module from "./draggable-list-demo.module.js";
 const sourceItems = [

package/dist/react.d.ts

@@ -2,62 +2,26 @@
  * NOTE: We put a .js ending on imports here to satisfy
  * TS / dist output.
  *
- * Single unified entry point for `@byline/ui`. Everything React-side
- * exports through this barrel — uikit foundations, drag-and-drop
- * helpers, presentational admin layout primitives, field widgets, form
- * runtime, and the field-side service contracts.
+ * Single unified entry point for `@byline/ui`.
  *
- * Why one barrel: previous releases split this into per-area subpath
- * exports (`./react/admin`, `./react/fields`, `./react/forms`,
- * `./react/services`). Bundlers that pre-bundle subpaths individually
- * (e.g. Vite's `optimizeDeps.include`) would inline a private copy of
- * the React Contexts in `services/*` per subpath — provider mounted on
- * one Context identity, hooks reading another. Collapsing to a single
- * specifier eliminates the trap structurally. Tree-shaking inside the
- * single ESM bundle handles unused exports for public-site consumers
- * (sideEffects is set to CSS only).
+ * Scope: framework-agnostic React primitives — uikit foundations
+ * (Button, Input, Modal, Drawer, Alert, Table, icons, …) plus the
+ * widgets that remained generic after the admin extraction (datepicker,
+ * search, timeline, image-lightbox). No CMS concepts, no admin-specific
+ * Contexts.
  *
- * Admin-domain components (admin users, roles, permissions, account
- * self-service, sign-in form, admin services context) live in
- * `@byline/admin` under per-vertical subpaths — they are no longer
- * exported from here. This package is the kit + form runtime +
- * collection-editor-shared widgets.
+ * Admin-domain React surface — forms, fields, presentational form
+ * layout (tabs/rows/groups), drag-and-drop helpers used by sortable
+ * fields, the field-side services Context, and the editor-shared
+ * widgets (status-badge, diff-viewer) — lives in `@byline/admin/react`.
+ * Server-only admin modules (admin-users, admin-roles, etc.) stay on
+ * their own per-vertical subpaths inside `@byline/admin`.
+ *
+ * One barrel rather than per-area subpath exports: bundlers that
+ * pre-bundle subpaths individually (e.g. Vite's `optimizeDeps.include`)
+ * would inline a private copy of any React Context per subpath —
+ * provider mounted on one identity, hooks reading another. Collapsing
+ * to a single specifier eliminates the trap structurally.
  */
-export * from './admin/group.js';
-export * from './admin/row.js';
-export * from './admin/tabs.js';
 export * from './dnd/draggable-sortable/index.js';
-export * from './fields/array/array-field.js';
-export * from './fields/blocks/blocks-field.js';
-export * from './fields/checkbox/checkbox-field.js';
-export * from './fields/column-formatter.js';
-export * from './fields/date-time-formatter.js';
-export * from './fields/datetime/datetime-field.js';
-export * from './fields/draggable-context-menu.js';
-export * from './fields/field-helpers.js';
-export * from './fields/field-renderer.js';
-export * from './fields/file/file-field.js';
-export * from './fields/file/file-upload-field.js';
-export * from './fields/group/group-field.js';
-export * from './fields/image/image-field.js';
-export * from './fields/image/image-upload-field.js';
-export * from './fields/local-date-time.js';
-export * from './fields/locale-badge.js';
-export * from './fields/numerical/numerical-field.js';
-export * from './fields/relation/relation-field.js';
-export * from './fields/relation/relation-picker.js';
-export * from './fields/select/select-field.js';
-export * from './fields/sortable-item.js';
-export * from './fields/text/text-field.js';
-export * from './fields/text-area/text-area-field.js';
-export * from './fields/use-field-change-handler.js';
-export * from './forms/document-actions.js';
-export * from './forms/form-context.js';
-export * from './forms/form-renderer.js';
-export * from './forms/navigation-guard.js';
-export * from './forms/path-widget.js';
-export * from './services/field-services-context.js';
 export * from './uikit.js';
-export * from './widgets/diff-viewer/diff-modal.js';
-export * from './widgets/status-badge/status-badge.js';
-export type { BylineFieldServices, CollectionListDoc, CollectionListParams, CollectionListResponse, GetCollectionDocumentsFn, UploadedFileResult, UploadFieldFn, } from './services/field-services-types.js';

package/dist/react.js

@@ -1,37 +1,2 @@
-export * from "./admin/group.js";
-export * from "./admin/row.js";
-export * from "./admin/tabs.js";
 export * from "./dnd/draggable-sortable/index.js";
-export * from "./fields/array/array-field.js";
-export * from "./fields/blocks/blocks-field.js";
-export * from "./fields/checkbox/checkbox-field.js";
-export * from "./fields/column-formatter.js";
-export * from "./fields/date-time-formatter.js";
-export * from "./fields/datetime/datetime-field.js";
-export * from "./fields/draggable-context-menu.js";
-export * from "./fields/field-helpers.js";
-export * from "./fields/field-renderer.js";
-export * from "./fields/file/file-field.js";
-export * from "./fields/file/file-upload-field.js";
-export * from "./fields/group/group-field.js";
-export * from "./fields/image/image-field.js";
-export * from "./fields/image/image-upload-field.js";
-export * from "./fields/local-date-time.js";
-export * from "./fields/locale-badge.js";
-export * from "./fields/numerical/numerical-field.js";
-export * from "./fields/relation/relation-field.js";
-export * from "./fields/relation/relation-picker.js";
-export * from "./fields/select/select-field.js";
-export * from "./fields/sortable-item.js";
-export * from "./fields/text/text-field.js";
-export * from "./fields/text-area/text-area-field.js";
-export * from "./fields/use-field-change-handler.js";
-export * from "./forms/document-actions.js";
-export * from "./forms/form-context.js";
-export * from "./forms/form-renderer.js";
-export * from "./forms/navigation-guard.js";
-export * from "./forms/path-widget.js";
-export * from "./services/field-services-context.js";
 export * from "./uikit.js";
-export * from "./widgets/diff-viewer/diff-modal.js";
-export * from "./widgets/status-badge/status-badge.js";

package/dist/styles/styles.css

@@ -1314,6 +1314,7 @@
     --surface-subtle: var(--canvas-50);
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
+    --surface-shimmer: var(--canvas-100);
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }
@@ -1336,6 +1337,7 @@
     --surface-subtle: var(--canvas-800);
     --surface-subtle-hover: var(--canvas-700);
     --surface-subtle-active: var(--canvas-600);
+    --surface-shimmer: oklch(from var(--canvas-base) calc(l * .45) c h);
     --surface-panel-scrollbar: var(--canvas-700);
     --surface-panel-scrollbar-thumb: var(--primary-400);
   }
@@ -1358,6 +1360,7 @@
     --surface-subtle: var(--canvas-50);
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
+    --surface-shimmer: var(--canvas-100);
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }

package/dist/uikit.d.ts

@@ -95,6 +95,7 @@ export * from './icons/stopwatch-icon.js';
 export * from './icons/success-icon.js';
 export * from './icons/user-icon.js';
 export * from './icons/users-icon.js';
+export * from './icons/video-icon.js';
 export * from './icons/wallet-icon.js';
 export * from './icons/warning-icon.js';
 export * from './icons/x-icon.js';

package/dist/uikit.js

@@ -90,6 +90,7 @@ export * from "./icons/stopwatch-icon.js";
 export * from "./icons/success-icon.js";
 export * from "./icons/user-icon.js";
 export * from "./icons/users-icon.js";
+export * from "./icons/video-icon.js";
 export * from "./icons/wallet-icon.js";
 export * from "./icons/warning-icon.js";
 export * from "./icons/x-icon.js";

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.5.2",
+  "version": "2.6.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -56,17 +56,13 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-form-start": "^1.32.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.2.1",
-    "lodash-es": "^4.18.1",
     "motion": "^12.40.0",
     "npm-run-all": "^4.1.5",
     "react-day-picker": "^10.0.1",
-    "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.3",
-    "zod-form-data": "^3.0.1",
-    "@byline/core": "2.5.2"
+    "@byline/core": "2.6.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -76,8 +72,6 @@
     "@biomejs/biome": "2.4.15",
     "@rsbuild/plugin-react": "^2.0.0",
     "@rslib/core": "^0.21.5",
-    "@types/lodash": "^4.17.24",
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^25.9.1",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/shimmer/shimmer.module.css

@@ -15,8 +15,8 @@
   :global(.byline-shimmer) {
     position: relative;
     overflow: hidden;
-    background-color: #f0f0f0;
-    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+    background-color: var(--surface-shimmer);
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
   }
@@ -25,8 +25,9 @@
   :global([data-theme="dark"]) {
     .shimmer,
     :global(.byline-shimmer) {
-      background-color: #141414;
-      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+      /* base colour comes from --surface-shimmer; only the white sheen is
+         toned down here so it doesn't glare against the dark bar */
+      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
     }
   }
 
@@ -34,6 +35,9 @@
   :global(.byline-shimmer-container) {
     display: flex;
     flex-direction: column;
+    /* When a container `height` is set, crop overflowing lines cleanly
+       rather than letting them spill past the skeleton's bounds. */
+    overflow: hidden;
   }
 
   .rectangular,

package/src/components/shimmer/shimmer.tsx

@@ -7,29 +7,39 @@ import styles from './shimmer.module.css'
 interface ShimmerProps {
   className?: string
   width?: string | number
+  /**
+   * Height of the bar. For the single-bar variants (`rectangular`,
+   * `circular`, and single-line `text`) this sizes the bar itself. For the
+   * multi-line text variant (`variant="text"` with `lines > 1`) it sizes the
+   * container that holds the lines — use `lineHeight` to size each line.
+   */
   height?: string | number
+  /**
+   * Height of each line in the multi-line text variant (`variant="text"`
+   * with `lines > 1`). Falls back to the `.text` class height (1rem) when
+   * omitted. Ignored by the single-bar variants — use `height` there.
+   */
+  lineHeight?: string | number
   borderRadius?: string
   variant?: 'text' | 'rectangular' | 'circular'
   lines?: number
   children?: React.ReactNode
 }
 
+const toCssSize = (value: string | number | undefined): string | undefined =>
+  typeof value === 'number' ? `${value}px` : value
+
 export function Shimmer({
   className,
   width = '100%',
-  height = '1rem',
+  height,
+  lineHeight,
   borderRadius,
   variant = 'rectangular',
   lines = 1,
   children,
   ...other
 }: ShimmerProps): React.JSX.Element {
-  const shimmerStyle = {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: typeof height === 'number' ? `${height}px` : height,
-    borderRadius: borderRadius,
-  }
-
   const getVariantClass = () => {
     switch (variant) {
       case 'text':
@@ -42,15 +52,24 @@ export function Shimmer({
   }
 
   if (variant === 'text' && lines > 1) {
+    // `height` sizes the container; each line is sized by `lineHeight`
+    // (undefined falls through to the `.text` class height). `height` is
+    // deliberately not spread onto the lines so it can't distort them.
+    const resolvedLineHeight = toCssSize(lineHeight)
     return (
-      <div className={cx(styles.shimmerContainer, className)} {...other}>
+      <div
+        className={cx(styles.shimmerContainer, className)}
+        style={{ width: toCssSize(width), height: toCssSize(height) }}
+        {...other}
+      >
         {Array.from({ length: lines }, (_, index) => (
           <div
             key={`shimmer-line-${index}`}
             className={cx(styles.shimmer, styles.text)}
             style={{
-              ...shimmerStyle,
               width: index === lines - 1 ? '75%' : '100%',
+              height: resolvedLineHeight,
+              borderRadius,
               marginBottom: index === lines - 1 ? 0 : '0.5rem',
             }}
           />
@@ -59,6 +78,12 @@ export function Shimmer({
     )
   }
 
+  const shimmerStyle = {
+    width: toCssSize(width),
+    height: toCssSize(height) ?? '1rem',
+    borderRadius,
+  }
+
   return (
     <div
       className={cx(styles.shimmer, getVariantClass(), className)}

package/src/dnd/draggable-sortable/demo/draggable-list-demo.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react'
 
+import { Card, GripperVerticalIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
-import { Card, GripperVerticalIcon } from '../../../uikit.js'
 import { DraggableSortable, moveItem, useSortable } from '..'
 import styles from './draggable-list-demo.module.css'
 

package/src/react.ts

@@ -2,79 +2,31 @@
  * NOTE: We put a .js ending on imports here to satisfy
  * TS / dist output.
  *
- * Single unified entry point for `@byline/ui`. Everything React-side
- * exports through this barrel — uikit foundations, drag-and-drop
- * helpers, presentational admin layout primitives, field widgets, form
- * runtime, and the field-side service contracts.
+ * Single unified entry point for `@byline/ui`.
  *
- * Why one barrel: previous releases split this into per-area subpath
- * exports (`./react/admin`, `./react/fields`, `./react/forms`,
- * `./react/services`). Bundlers that pre-bundle subpaths individually
- * (e.g. Vite's `optimizeDeps.include`) would inline a private copy of
- * the React Contexts in `services/*` per subpath — provider mounted on
- * one Context identity, hooks reading another. Collapsing to a single
- * specifier eliminates the trap structurally. Tree-shaking inside the
- * single ESM bundle handles unused exports for public-site consumers
- * (sideEffects is set to CSS only).
+ * Scope: framework-agnostic React primitives — uikit foundations
+ * (Button, Input, Modal, Drawer, Alert, Table, icons, …) plus the
+ * widgets that remained generic after the admin extraction (datepicker,
+ * search, timeline, image-lightbox). No CMS concepts, no admin-specific
+ * Contexts.
  *
- * Admin-domain components (admin users, roles, permissions, account
- * self-service, sign-in form, admin services context) live in
- * `@byline/admin` under per-vertical subpaths — they are no longer
- * exported from here. This package is the kit + form runtime +
- * collection-editor-shared widgets.
+ * Admin-domain React surface — forms, fields, presentational form
+ * layout (tabs/rows/groups), drag-and-drop helpers used by sortable
+ * fields, the field-side services Context, and the editor-shared
+ * widgets (status-badge, diff-viewer) — lives in `@byline/admin/react`.
+ * Server-only admin modules (admin-users, admin-roles, etc.) stay on
+ * their own per-vertical subpaths inside `@byline/admin`.
+ *
+ * One barrel rather than per-area subpath exports: bundlers that
+ * pre-bundle subpaths individually (e.g. Vite's `optimizeDeps.include`)
+ * would inline a private copy of any React Context per subpath —
+ * provider mounted on one identity, hooks reading another. Collapsing
+ * to a single specifier eliminates the trap structurally.
  */
 
-// Presentational admin layout primitives.
-export * from './admin/group.js'
-export * from './admin/row.js'
-export * from './admin/tabs.js'
-// Drag-and-drop helpers.
+// Generic vertical-list sortable helpers over @dnd-kit/sortable. No
+// CMS concepts in the API — callers pass ids + an onDragEnd callback.
 export * from './dnd/draggable-sortable/index.js'
-// Field widgets.
-export * from './fields/array/array-field.js'
-export * from './fields/blocks/blocks-field.js'
-export * from './fields/checkbox/checkbox-field.js'
-export * from './fields/column-formatter.js'
-export * from './fields/date-time-formatter.js'
-export * from './fields/datetime/datetime-field.js'
-export * from './fields/draggable-context-menu.js'
-export * from './fields/field-helpers.js'
-export * from './fields/field-renderer.js'
-export * from './fields/file/file-field.js'
-export * from './fields/file/file-upload-field.js'
-export * from './fields/group/group-field.js'
-export * from './fields/image/image-field.js'
-export * from './fields/image/image-upload-field.js'
-export * from './fields/local-date-time.js'
-export * from './fields/locale-badge.js'
-export * from './fields/numerical/numerical-field.js'
-export * from './fields/relation/relation-field.js'
-export * from './fields/relation/relation-picker.js'
-export * from './fields/select/select-field.js'
-export * from './fields/sortable-item.js'
-export * from './fields/text/text-field.js'
-export * from './fields/text-area/text-area-field.js'
-export * from './fields/use-field-change-handler.js'
-// Form runtime.
-export * from './forms/document-actions.js'
-export * from './forms/form-context.js'
-export * from './forms/form-renderer.js'
-export * from './forms/navigation-guard.js'
-export * from './forms/path-widget.js'
-// Field-side service contract types + Context provider/hook.
-export * from './services/field-services-context.js'
 // Foundational surface — synced from @infonomic/uikit. See
 // scripts/sync-from-uikit.sh and src/.uikit-sync.json.
 export * from './uikit.js'
-// Collection-editor-shared widgets.
-export * from './widgets/diff-viewer/diff-modal.js'
-export * from './widgets/status-badge/status-badge.js'
-export type {
-  BylineFieldServices,
-  CollectionListDoc,
-  CollectionListParams,
-  CollectionListResponse,
-  GetCollectionDocumentsFn,
-  UploadedFileResult,
-  UploadFieldFn,
-} from './services/field-services-types.js'

package/src/styles/functional/surfaces.css

@@ -39,12 +39,16 @@
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
 
+    /* Shimmer / skeleton placeholder bar — sits a step darker than the
+       panel so loading lines read clearly on a light surface. */
+    --surface-shimmer: var(--canvas-100);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }
 
-  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
    * We rely on the consuming application to detect a user's 
    * preferred color scheme - either by header or cookie, and to set 
    * a root html class accordingly (for now), which unfortunately means
@@ -83,6 +87,11 @@
     --surface-subtle-hover: var(--canvas-700);
     --surface-subtle-active: var(--canvas-600);
 
+    /* Shimmer / skeleton placeholder bar — lifted just above the panel so
+       loading lines are visible without glaring on a dark surface. Sits
+       between canvas-800 (panel) and canvas-700 (hover). */
+    --surface-shimmer: oklch(from var(--canvas-base) calc(l * 0.45) c h);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--canvas-700);
     --surface-panel-scrollbar-thumb: var(--primary-400);
@@ -125,6 +134,9 @@
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
 
+    /* Shimmer / skeleton placeholder bar */
+    --surface-shimmer: var(--canvas-100);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);

package/src/uikit.ts

@@ -103,6 +103,7 @@ export * from './icons/stopwatch-icon.js'
 export * from './icons/success-icon.js'
 export * from './icons/user-icon.js'
 export * from './icons/users-icon.js'
+export * from './icons/video-icon.js'
 export * from './icons/wallet-icon.js'
 export * from './icons/warning-icon.js'
 export * from './icons/x-icon.js'

package/dist/admin/group.d.ts

@@ -1,27 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import type { ReactNode } from 'react';
-interface AdminGroupProps {
-    /** Optional heading rendered as a `<legend>` above the cluster. */
-    label?: string;
-    children: ReactNode;
-    className?: string;
-}
-/**
- * Labelled fieldset clustering related fields together.
- *
- * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `groups`
- * primitive. Renders a bordered, padded `<fieldset>` with an optional
- * `<legend>` for the label.
- *
- * Stable override handles: `.byline-admin-group` on the fieldset and
- * `.byline-admin-group-legend` on the legend (alongside the hashed
- * CSS-modules locals).
- */
-export declare const AdminGroup: ({ label, children, className }: AdminGroupProps) => import("react").JSX.Element;
-export {};