@byline/ui 0.9.3

package/src/admin/components/collections/diff-modal.tsx

@@ -0,0 +1,171 @@
+/**
+ * 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 { useEffect, useState } from 'react'
+
+import { CloseIcon, IconButton, LoaderRing, Modal } from '@infonomic/uikit/react'
+import cx from 'classnames'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './diff-modal.module.css'
+
+// Keys that are per-version metadata rather than content — strip before diffing
+// so the diff focuses on meaningful content changes. ClientDocument-shape
+// metadata keys after the Phase 7 admin migration.
+const STRIP_KEYS = new Set([
+  'id',
+  'versionId',
+  'path',
+  'status',
+  'createdAt',
+  'updatedAt',
+  'hasPublishedVersion',
+  '_publishedVersion',
+])
+
+function stripMeta(doc: Record<string, unknown>): Record<string, unknown> {
+  // With the nested document shape, extract just the fields for diffing.
+  if (doc.fields && typeof doc.fields === 'object') {
+    return doc.fields as Record<string, unknown>
+  }
+  return Object.fromEntries(Object.entries(doc).filter(([k]) => !STRIP_KEYS.has(k)))
+}
+
+export interface DiffModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  collection: string
+  documentId: string
+  /** The `versionId` of the historical version to compare. */
+  versionId: string
+  /** A human-readable label for the historical version (e.g. a date string). */
+  versionLabel: string
+  /** The already-loaded current (latest) version of the document. */
+  currentDocument: Record<string, unknown>
+  /** Content locale to compare — undefined / 'all' shows all locales. */
+  locale?: string
+}
+
+export function DiffModal({
+  isOpen,
+  onDismiss,
+  collection,
+  documentId,
+  versionId,
+  versionLabel,
+  currentDocument,
+  locale,
+}: DiffModalProps) {
+  const { getCollectionDocumentVersion } = useBylineAdminServices()
+  const [historicalDoc, setHistoricalDoc] = useState<Record<string, unknown> | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isOpen || !versionId) return
+
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setHistoricalDoc(null)
+
+    getCollectionDocumentVersion(collection, documentId, versionId, locale)
+      .then((doc) => {
+        if (cancelled) return
+        setHistoricalDoc(doc)
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setError(err instanceof Error ? err.message : 'Failed to load version')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [isOpen, collection, documentId, versionId, locale, getCollectionDocumentVersion])
+
+  const currentStr = currentDocument ? JSON.stringify(stripMeta(currentDocument), null, 2) : ''
+
+  const historicalStr = historicalDoc ? JSON.stringify(stripMeta(historicalDoc), null, 2) : ''
+
+  return (
+    <Modal isOpen={isOpen} closeOnOverlayClick={true} onDismiss={onDismiss}>
+      <Modal.Container
+        style={{
+          width: '96vw',
+          maxWidth: '96vw',
+          height: '90vh',
+          maxHeight: '90vh',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+      >
+        <Modal.Header className={cx('byline-diff-modal-header', styles.header)}>
+          <div className={cx('byline-diff-modal-title-stack', styles['title-stack'])}>
+            <h3 className={cx('byline-diff-modal-title', styles.title)}>Version Comparison</h3>
+            <p className={cx('byline-diff-modal-subtitle', styles.subtitle)}>
+              Comparing{' '}
+              <span className={cx('byline-diff-modal-version', styles.version)}>
+                {versionLabel}
+              </span>{' '}
+              (left) against current version (right)
+            </p>
+          </div>
+          <IconButton onClick={onDismiss} size="xs" aria-label="Close comparison">
+            <CloseIcon width="15px" height="15px" />
+          </IconButton>
+        </Modal.Header>
+
+        <Modal.Content
+          className={cx('byline-diff-modal-content', styles.content)}
+          style={{ minHeight: 0 }}
+        >
+          {loading && (
+            <div className={cx('byline-diff-modal-state', styles.state)}>
+              <LoaderRing size={28} color="#666666" />
+              <span>Loading version…</span>
+            </div>
+          )}
+
+          {error && (
+            <div
+              className={cx(
+                'byline-diff-modal-state',
+                'byline-diff-modal-error',
+                styles.state,
+                styles.error
+              )}
+            >
+              {error}
+            </div>
+          )}
+
+          {!loading && !error && historicalDoc && (
+            <div className={cx('byline-diff-modal-viewer', styles.viewer)}>
+              <ReactDiffViewer
+                oldValue={historicalStr}
+                newValue={currentStr}
+                splitView={true}
+                compareMethod={DiffMethod.LINES}
+                useDarkTheme={true}
+                leftTitle={versionLabel}
+                rightTitle="Current version"
+                hideLineNumbers={false}
+              />
+            </div>
+          )}
+        </Modal.Content>
+      </Modal.Container>
+    </Modal>
+  )
+}

package/src/admin/components/collections/status-badge.module.css

@@ -0,0 +1,31 @@
+/**
+ * StatusBadge — workflow-status pill, optionally preceded by a "live" dot.
+ *
+ * Override handles:
+ *   .byline-status-badge-wrap   — the outer flex container
+ *   .byline-status-badge-dot    — the green "published version live" dot
+ *   .byline-status-badge        — the badge itself
+ */
+
+.wrap,
+:global(.byline-status-badge-wrap) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.dot,
+:global(.byline-status-badge-dot) {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--border-radius-full);
+  background-color: var(--green-500);
+}
+
+.badge,
+:global(.byline-status-badge) {
+  padding: 0 0.375rem;
+  font-size: 0.65rem;
+  line-height: 1.5;
+}

package/src/admin/components/collections/status-badge.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { WorkflowStatus } from '@byline/core'
+import {
+  WORKFLOW_STATUS_ARCHIVED,
+  WORKFLOW_STATUS_DRAFT,
+  WORKFLOW_STATUS_PUBLISHED,
+} from '@byline/core'
+import { Badge } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './status-badge.module.css'
+
+function statusIntent(status: string): 'success' | 'warning' | 'info' | 'noeffect' {
+  switch (status) {
+    case WORKFLOW_STATUS_PUBLISHED:
+      return 'success'
+    case WORKFLOW_STATUS_DRAFT:
+      return 'warning'
+    case WORKFLOW_STATUS_ARCHIVED:
+      return 'info'
+    default:
+      return 'noeffect'
+  }
+}
+
+/**
+ * Compact badge for workflow status values. Maps the three built-in
+ * statuses (draft, published, archived) to semantic intents and falls
+ * back to `noeffect` for any custom workflow statuses.
+ *
+ * When `hasPublishedVersion` is true and the current status is not
+ * `published`, a small green dot is rendered before the badge to
+ * indicate that a published version is live.
+ *
+ * Stable override handles: `.byline-status-badge-wrap`,
+ * `.byline-status-badge-dot`, `.byline-status-badge`.
+ */
+export const StatusBadge = ({
+  status,
+  workflowStatuses,
+  hasPublishedVersion,
+}: {
+  status: string
+  workflowStatuses: WorkflowStatus[]
+  hasPublishedVersion?: boolean
+}) => {
+  const label = workflowStatuses.find((s) => s.name === status)?.label ?? String(status ?? '')
+
+  return (
+    <span className={cx('byline-status-badge-wrap', styles.wrap)}>
+      {hasPublishedVersion === true && status !== 'published' && (
+        <span
+          title="A published version is live"
+          className={cx('byline-status-badge-dot', styles.dot)}
+        />
+      )}
+      <Badge intent={statusIntent(status)} className={cx('byline-status-badge', styles.badge)}>
+        {label}
+      </Badge>
+    </span>
+  )
+}

package/src/admin/group.module.css

@@ -0,0 +1,41 @@
+/**
+ * Group — 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.
+ *
+ * Override handles: `.byline-admin-group` (the fieldset) and
+ * `.byline-admin-group-legend` (the optional heading) are exposed as
+ * stable global classes for host overrides.
+ *
+ * Note: this is the *admin layout* group primitive, not the schema-level
+ * `group` field type. Field widgets use `byline-field-*` handles to keep
+ * the namespaces disambiguated.
+ */
+
+.group,
+:global(.byline-admin-group) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: var(--spacing-12);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-md);
+}
+
+.legend,
+:global(.byline-admin-group-legend) {
+  padding-inline: var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .group,
+  :global(.byline-admin-group) {
+    border-color: var(--gray-700);
+  }
+}

package/src/admin/group.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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'
+
+import cx from 'classnames'
+
+import styles from './group.module.css'
+
+interface GroupProps {
+  /** 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 const Group = ({ label, children, className }: GroupProps) => {
+  return (
+    <fieldset className={cx('byline-admin-group', styles.group, className)}>
+      {label && <legend className={cx('byline-admin-group-legend', styles.legend)}>{label}</legend>}
+      {children}
+    </fieldset>
+  )
+}

package/src/admin/row.module.css

@@ -0,0 +1,32 @@
+/**
+ * Row — horizontal flex layout for admin form fields.
+ *
+ * Members render side-by-side at `sm` and above, stack vertically below.
+ * `flex: 1` + `min-width: 0` on direct children lets two text inputs
+ * share the row evenly without overflowing.
+ *
+ * Override handle: `.byline-admin-row` is exposed as a stable global
+ * class so hosts can target this element from their own stylesheet
+ * without referring to the hashed local name.
+ */
+
+.row,
+:global(.byline-admin-row) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+}
+
+.row > *,
+:global(.byline-admin-row) > * {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (min-width: 40rem) {
+  .row,
+  :global(.byline-admin-row) {
+    flex-direction: row;
+  }
+}

package/src/admin/row.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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'
+
+import cx from 'classnames'
+
+import styles from './row.module.css'
+
+interface RowProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Horizontal flex-row layout for admin form fields.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `rows`
+ * primitive. Members are rendered side-by-side above the `sm` breakpoint
+ * and stack vertically below it. `flex-1` + `min-width: 0` lets two text
+ * inputs share the row evenly without overflowing.
+ *
+ * The element carries `.byline-admin-row` as a stable global class for
+ * host overrides (alongside the hashed CSS-modules local).
+ */
+export const Row = ({ children, className }: RowProps) => {
+  return <div className={cx('byline-admin-row', styles.row, className)}>{children}</div>
+}

package/src/admin/tabs.module.css

@@ -0,0 +1,107 @@
+/**
+ * Tabs — navigation bar for admin form layouts.
+ *
+ * Override handles:
+ *   .byline-admin-tabs        — the tablist container
+ *   .byline-admin-tab         — each tab button
+ *   .byline-admin-tab-active  — added when the tab is the active one
+ *   .byline-admin-tab-label   — the inner label span (with optional badge)
+ *   .byline-admin-tab-badge   — the inline error-count badge
+ */
+
+.tabs,
+:global(.byline-admin-tabs) {
+  display: flex;
+  gap: var(--spacing-16);
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+}
+
+.tab,
+:global(.byline-admin-tab) {
+  position: relative;
+  margin-bottom: -1px;
+  padding: 0.625rem 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--gray-500);
+  font-size: 1.1rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
+  outline: none;
+}
+
+.tab:hover,
+:global(.byline-admin-tab):hover {
+  color: var(--gray-800);
+  border-bottom-color: var(--gray-300);
+}
+
+.tab:focus-visible,
+:global(.byline-admin-tab):focus-visible {
+  box-shadow: 0 0 0 2px var(--blue-500);
+}
+
+.tab-active,
+:global(.byline-admin-tab-active) {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.tab-active:hover,
+:global(.byline-admin-tab-active):hover {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.label,
+:global(.byline-admin-tab-label) {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.badge,
+:global(.byline-admin-tab-badge) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.7rem;
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .tabs,
+  :global(.byline-admin-tabs) {
+    border-bottom-color: var(--gray-700);
+  }
+
+  .tab,
+  :global(.byline-admin-tab) {
+    color: var(--gray-400);
+  }
+
+  .tab:hover,
+  :global(.byline-admin-tab):hover {
+    color: var(--gray-200);
+    border-bottom-color: var(--gray-600);
+  }
+
+  .tab-active,
+  :global(.byline-admin-tab-active) {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
+
+  .tab-active:hover,
+  :global(.byline-admin-tab-active):hover {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
+}

package/src/admin/tabs.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 { Badge } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './tabs.module.css'
+
+export interface TabItem {
+  name: string
+  label: string
+}
+
+interface TabsProps {
+  tabs: TabItem[]
+  activeTab: string
+  onChange: (name: string) => void
+  /** Error counts keyed by tab name — shows a danger badge when > 0. */
+  errorCounts?: Record<string, number>
+  className?: string
+}
+
+/**
+ * Tabs navigation bar for admin form layouts.
+ *
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
+ * Each tab is a simple button with a bottom-border active indicator.
+ * Inactive tabs show a subtle hover state. Fully dark-mode aware.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
+ * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
+ * `.byline-admin-tab-badge`.
+ */
+export const Tabs = ({ tabs, activeTab, onChange, errorCounts, className }: TabsProps) => {
+  return (
+    <div
+      role="tablist"
+      aria-label="Form tabs"
+      className={cx('byline-admin-tabs', styles.tabs, className)}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.name === activeTab
+        return (
+          <button
+            key={tab.name}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            onClick={() => onChange(tab.name)}
+            className={cx(
+              'byline-admin-tab',
+              styles.tab,
+              isActive && ['byline-admin-tab-active', styles['tab-active']]
+            )}
+          >
+            <span className={cx('byline-admin-tab-label', styles.label)}>
+              {tab.label}
+              {(errorCounts?.[tab.name] ?? 0) > 0 && (
+                <Badge intent="danger" className={cx('byline-admin-tab-badge', styles.badge)}>
+                  {errorCounts?.[tab.name]}
+                </Badge>
+              )}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: { [key: string]: string }
+  export default classes
+}

package/src/dnd/draggable-sortable/demo/draggable-list-demo.module.css

@@ -0,0 +1,65 @@
+/**
+ * DraggableList demo — example of how to assemble DraggableSortable +
+ * useSortable into a working list. Not part of the public surface; kept as
+ * a documentation example.
+ *
+ * Override handles:
+ *   .byline-demo-list           — root list container
+ *   .byline-demo-card           — single draggable card
+ *   .byline-demo-card-dragging  — added while the card is mid-drag
+ *   .byline-demo-card-header    — gripper + title row
+ *   .byline-demo-card-grip      — drag handle column
+ */
+
+.list,
+:global(.byline-demo-list) {
+  position: relative;
+  margin-inline: auto;
+  max-width: 600px;
+}
+
+.card,
+:global(.byline-demo-card) {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 100%;
+  max-width: 24rem;
+  margin-bottom: var(--spacing-16);
+  padding: 1.5rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--canvas-25);
+  border-radius: var(--border-radius-lg);
+  background-color: white;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  text-decoration: none;
+}
+
+.card-dragging,
+:global(.byline-demo-card-dragging) {
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.card-header,
+:global(.byline-demo-card-header) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.card-grip,
+:global(.byline-demo-card-grip) {
+  margin-right: var(--spacing-8);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .card,
+  :global(.byline-demo-card) {
+    background-color: var(--canvas-800);
+  }
+}