@byline/ui 2.2.9 → 2.3.0

package/dist/forms/form-renderer_module.css

@@ -195,8 +195,7 @@
     padding-top: .25rem;
     padding-right: 12px;
     padding-left: var(--spacing-16);
-    border-left: var(--border-width-thin) var(--border-style-solid)
-      var(--gray-100);
+    border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
     margin-bottom: 0;
     position: sticky;
     top: 95px;

package/dist/icons/index.d.ts

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

package/dist/icons/index.js

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

package/dist/icons/video-icon.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const VideoIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/icons/video-icon.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const VideoIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('video-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
+                })
+            ]
+        })
+    });
+};
+VideoIcon.displayName = 'VideoIcon';
+export { VideoIcon };

package/dist/react.d.ts

@@ -45,6 +45,7 @@ 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';

package/dist/react.js

@@ -26,6 +26,7 @@ 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";

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.2.9",
+  "version": "2.3.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -31,6 +31,7 @@
   ],
   "exports": {
     "./react": {
+      "development": "./src/react.ts",
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
       "main": "./dist/react.js",
@@ -65,9 +66,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.3",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "2.2.9",
-    "@byline/core": "2.2.9",
-    "@byline/client": "2.2.9"
+    "@byline/admin": "2.3.0",
+    "@byline/client": "2.3.0",
+    "@byline/core": "2.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/field-renderer.tsx

@@ -209,6 +209,7 @@ export const FieldRenderer = ({
             defaultValue={defaultValue}
             onChange={handleChange}
             path={path}
+            collectionPath={collectionPath}
           />
         )
       case 'image':

package/src/fields/file/file-field.module.css

@@ -1,75 +1,135 @@
 /**
- * FileField — placeholder file widget showing stored file metadata.
+ * FileField — metadata tile + remove/upload affordances for arbitrary file
+ * uploads (non-image). Mirrors `image-field.module.css` structurally; the
+ * image-only preview / SVG-shape / pending-badge rules are dropped.
  *
  * Override handles:
- *   .byline-field-file              — wrapper div
- *   .byline-field-file-dirty        — dirty-state border on the wrapper
- *   .byline-field-file-header       — label/help row
- *   .byline-field-file-label        — primary label text
- *   .byline-field-file-help         — secondary help text
- *   .byline-field-file-action       — action button (e.g. "Upload (coming soon)")
- *   .byline-field-file-empty        — empty-state hint text
- *   .byline-field-file-meta         — metadata list
- *   .byline-field-file-meta-key     — metadata field-name span
+ *   .byline-field-file                — wrapper div
+ *   .byline-field-file-header         — label row
+ *   .byline-field-file-actions        — top-right icon-button group (download + remove)
+ *   .byline-field-file-empty          — empty-state hint text
+ *   .byline-field-file-tile           — bordered metadata tile
+ *   .byline-field-file-uploading      — centered overlay shown while uploading
+ *   .byline-field-file-icon-wrap      — left-aligned document-icon wrapper
+ *   .byline-field-file-icon           — the document glyph itself
+ *   .byline-field-file-pending        — yellow "pending upload" pill
+ *   .byline-field-file-meta           — metadata list
+ *   .byline-field-file-meta-key       — metadata field-name span
+ *   .byline-field-file-meta-pending   — yellow text inside pending status
  */
 
-.dirty,
-:global(.byline-field-file-dirty) {
-  padding: var(--spacing-12);
-  border: var(--border-width-thin) var(--border-style-solid) var(--blue-300);
-  border-radius: var(--border-radius-md);
-}
-
 .header,
 :global(.byline-field-file-header) {
   display: flex;
   align-items: baseline;
-  justify-content: space-between;
+  gap: var(--spacing-8);
   margin-bottom: 0.25rem;
 }
 
-.label,
-:global(.byline-field-file-label) {
-  color: var(--gray-100);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+.actions,
+:global(.byline-field-file-actions) {
+  position: absolute;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
 }
 
-.help,
-:global(.byline-field-file-help) {
-  margin-top: 0.125rem;
-  color: var(--gray-400);
-  font-size: var(--font-size-xs);
+:global(.byline-field-file-actions .byline-button) {
+  color: var(--gray-900);
 }
 
-.action,
-:global(.byline-field-file-action) {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--blue-300);
+:global(.dark .byline-field-file-actions .byline-button),
+:global([data-theme="dark"] .byline-field-file-actions .byline-button) {
+  color: var(--gray-200);
+}
+
+.empty,
+:global(.byline-field-file-empty) {
+  color: var(--gray-500);
   font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+.tile,
+:global(.byline-field-file-tile) {
+  position: relative;
+  display: flex;
+  gap: var(--spacing-16);
+  margin-top: 0.25rem;
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+}
+
+.uploading,
+:global(.byline-field-file-uploading) {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: oklch(from var(--gray-950) l c h / 0.5);
+  border-radius: var(--border-radius-md);
+}
+
+.icon-wrap,
+:global(.byline-field-file-icon-wrap) {
+  position: relative;
+  flex-shrink: 0;
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+  border-radius: var(--border-radius-sm);
+  color: var(--gray-300);
+}
+
+/* Interactive affordance when the wrap is rendered as a link
+   (file is stored — clicking opens the asset in a new tab). */
+a.icon-wrap,
+:global(a.byline-field-file-icon-wrap) {
   cursor: pointer;
+  text-decoration: none;
+  transition:
+    border-color 120ms ease,
+    color 120ms ease;
 }
 
-.action:hover,
-:global(.byline-field-file-action):hover {
-  color: var(--blue-200);
-  text-decoration: underline;
-  text-underline-offset: 2px;
+a.icon-wrap:hover,
+:global(a.byline-field-file-icon-wrap):hover {
+  border-color: var(--primary-500);
+  color: var(--primary-400);
 }
 
-.action:disabled,
-:global(.byline-field-file-action):disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
+a.icon-wrap:focus-visible,
+:global(a.byline-field-file-icon-wrap):focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
 }
 
-.empty,
-:global(.byline-field-file-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
+.icon,
+:global(.byline-field-file-icon) {
+  opacity: 0.85;
+}
+
+.pending,
+:global(.byline-field-file-pending) {
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  background-color: oklch(from var(--yellow-600) l c h / 0.9);
+  color: var(--yellow-100);
+  font-size: 0.6rem;
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-sm);
 }
 
 .meta,
@@ -77,7 +137,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
-  margin-top: 0.25rem;
+  padding-right: var(--spacing-32);
   color: var(--gray-200);
   font-size: var(--font-size-xs);
 }
@@ -86,3 +146,8 @@
 :global(.byline-field-file-meta-key) {
   font-weight: var(--font-weight-semibold);
 }
+
+.meta-pending,
+:global(.byline-field-file-meta-pending) {
+  color: var(--yellow-400);
+}

package/src/fields/file/file-field.tsx

@@ -6,17 +6,53 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import type { FileField as FieldType, StoredFileValue } from '@byline/core'
+import {
+  type FileField as FieldType,
+  isPendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
 import cx from 'classnames'
 
-import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
-import { ErrorText } from '../../uikit.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import {
+  useFieldError,
+  useFieldValue,
+  useFormContext,
+  useIsDirty,
+  useIsFieldUploading,
+} from '../../forms/form-context'
+import { CloseIcon } from '../../icons/close-icon.js'
+import { DocumentIcon } from '../../icons/document-icon.js'
+import { DownloadIcon } from '../../icons/download-icon.js'
+import { VideoIcon } from '../../icons/video-icon.js'
+import { ErrorText, HelpText, Label, LoaderRing } from '../../uikit.js'
+import { useFieldChangeHandler } from '../use-field-change-handler'
 import styles from './file-field.module.css'
+import { FileUploadField } from './file-upload-field'
+
+/**
+ * Trigger a download via a temporary anchor. Mirrors the helper in
+ * `image-lightbox.tsx`: same-origin URLs respect the `download` attribute and
+ * save with the suggested filename; cross-origin URLs without CORS headers
+ * fall through to navigation in a new tab, where the user can right-click
+ * Save As.
+ */
+function triggerDownload(url: string, filename?: string) {
+  if (typeof document === 'undefined') return
+  const a = document.createElement('a')
+  a.href = url
+  if (filename) a.download = filename
+  a.target = '_blank'
+  a.rel = 'noreferrer'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
 
 interface FileFieldProps {
   field: FieldType
-  // Stored value is currently a plain object with file metadata
-  // coming from the seed data / storage layer.
+  /** Collection path required to call the /upload endpoint. */
+  collectionPath?: string
   value?: StoredFileValue | null
   defaultValue?: StoredFileValue | null
   onChange?: (value: StoredFileValue | null) => void
@@ -25,6 +61,7 @@ interface FileFieldProps {
 
 export const FileField = ({
   field,
+  collectionPath,
   value,
   defaultValue,
   onChange: _onChange,
@@ -34,73 +71,200 @@ export const FileField = ({
   const fieldError = useFieldError(fieldPath)
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
-  const incomingValue = value ?? fieldValue ?? defaultValue ?? null
+  const isUploading = useIsFieldUploading(fieldPath)
+  const { removePendingUpload } = useFormContext()
+
+  const handleChange = useFieldChangeHandler(field, fieldPath)
+
+  // Mirror the image-field rule: once the field has been touched, the form
+  // value is authoritative (even when null, so a click-to-remove sticks);
+  // otherwise fall back to props.
+  const incomingValue = isDirty
+    ? (fieldValue ?? null)
+    : (value ?? fieldValue ?? defaultValue ?? null)
 
-  const isPlaceholderStoredFileValue = (v: unknown): boolean => {
+  const isPending = isPendingStoredFileValue(incomingValue)
+
+  // Legacy placeholder shape — kept for backwards compatibility with older
+  // seed data, matching the image-field check.
+  const isOldPlaceholder = (v: unknown): boolean => {
     if (!v || typeof v !== 'object') return false
     const maybe = v as Partial<StoredFileValue>
     return maybe.storageProvider === 'placeholder' && maybe.storagePath === 'pending'
   }
 
-  const effectiveValue: StoredFileValue | null = isPlaceholderStoredFileValue(incomingValue)
-    ? null
-    : incomingValue
+  const showUploadWidget = incomingValue == null || isOldPlaceholder(incomingValue)
+
+  const handleRemove = () => {
+    if (isPending) {
+      removePendingUpload(fieldPath)
+    }
+    handleChange(null)
+  }
+
+  // MIME-driven glyph dispatch. Until a dedicated VideoField primitive lands,
+  // the FileField is the canonical home for video uploads — the schema's
+  // `upload.allowedMimeTypes` decides what gets in, and we swap the glyph
+  // here based on the resolved MIME so the tile reads as "video" rather
+  // than "generic document".
+  const isVideo = incomingValue?.mimeType?.startsWith('video/') === true
+  const FileGlyph = isVideo ? VideoIcon : DocumentIcon
+
+  const htmlId = fieldPath
 
   return (
-    <div
-      className={cx(
-        'byline-field-file',
-        field.name,
-        isDirty && ['byline-field-file-dirty', styles.dirty]
-      )}
-    >
+    <div className={`byline-field-file ${field.name}`}>
       <div className={cx('byline-field-file-header', styles.header)}>
-        <div>
-          <div className={cx('byline-field-file-label', styles.label)}>
-            {field.label ?? field.name}
-            {field.optional ? '' : ' *'}
-          </div>
-          {field.helpText && (
-            <div className={cx('byline-field-file-help', styles.help)}>{field.helpText}</div>
-          )}
-        </div>
-        {/* Placeholder action area for future upload UI */}
-        <button type="button" className={cx('byline-field-file-action', styles.action)} disabled>
-          Upload (coming soon)
-        </button>
+        <Label
+          id={htmlId}
+          htmlFor={htmlId}
+          label={field.label ?? field.name}
+          required={!field.optional}
+        />
       </div>
 
-      {effectiveValue == null ? (
-        <div className={cx('byline-field-file-empty', styles.empty)}>No file selected</div>
+      {showUploadWidget ? (
+        collectionPath ? (
+          <FileUploadField
+            field={field}
+            collectionPath={collectionPath}
+            fieldPath={fieldPath}
+            onUploaded={(uploaded) => {
+              handleChange(uploaded)
+            }}
+          />
+        ) : (
+          <div className={cx('byline-field-file-empty', styles.empty)}>No file selected</div>
+        )
       ) : (
-        <div className={cx('byline-field-file-meta', styles.meta)}>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Filename:</span>{' '}
-            {effectiveValue.filename}
-          </div>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Original:</span>{' '}
-            {effectiveValue.originalFilename}
-          </div>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Type:</span>{' '}
-            {effectiveValue.mimeType}
-          </div>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Size:</span>{' '}
-            {effectiveValue.fileSize}
-          </div>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Storage:</span>{' '}
-            {effectiveValue.storageProvider}
-          </div>
-          <div>
-            <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Path:</span>{' '}
-            {effectiveValue.storagePath}
+        <div className={cx('byline-field-file-tile', styles.tile)}>
+          {isUploading && (
+            <div
+              className={cx('byline-field-file-uploading', styles.uploading)}
+              aria-live="polite"
+              aria-busy="true"
+            >
+              <LoaderRing />
+            </div>
+          )}
+          {collectionPath && (
+            <div className={cx('byline-field-file-actions', styles.actions)}>
+              {!isPending && incomingValue?.storageUrl && (
+                <IconButton
+                  type="button"
+                  intent="noeffect"
+                  onClick={() =>
+                    triggerDownload(
+                      incomingValue.storageUrl as string,
+                      incomingValue.originalFilename ?? incomingValue.filename
+                    )
+                  }
+                  size="xs"
+                  disabled={isUploading}
+                  aria-label="Download file"
+                >
+                  <DownloadIcon width="15px" height="15px" />
+                </IconButton>
+              )}
+              <IconButton
+                type="button"
+                intent="noeffect"
+                onClick={handleRemove}
+                size="xs"
+                disabled={isUploading}
+                aria-label="Remove file"
+              >
+                <CloseIcon width="15px" height="15px" />
+              </IconButton>
+            </div>
+          )}
+          {/* Document icon + (optional) pending badge — mirrors the
+              image-field's preview-wrap so the file tile has the same
+              visual hierarchy: glyph on the left, metadata on the right.
+              When the file is stored (non-pending and resolvable storageUrl),
+              the wrap is rendered as an anchor that opens the asset in a new
+              tab — browser-native viewer dispatch (PDFs render inline,
+              non-renderable types fall through to download). */}
+          {!isPending && incomingValue?.storageUrl ? (
+            <a
+              href={incomingValue.storageUrl}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={`Open ${incomingValue.originalFilename ?? incomingValue.filename} in a new tab`}
+              className={cx('byline-field-file-icon-wrap', styles['icon-wrap'])}
+            >
+              <FileGlyph
+                width="48px"
+                height="48px"
+                className={cx('byline-field-file-icon', styles.icon)}
+              />
+            </a>
+          ) : (
+            <div className={cx('byline-field-file-icon-wrap', styles['icon-wrap'])}>
+              <FileGlyph
+                width="48px"
+                height="48px"
+                className={cx('byline-field-file-icon', styles.icon)}
+              />
+              {isPending && (
+                <div className={cx('byline-field-file-pending', styles.pending)}>
+                  Pending upload
+                </div>
+              )}
+            </div>
+          )}
+          <div className={cx('byline-field-file-meta', styles.meta)}>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                Filename:
+              </span>{' '}
+              {incomingValue?.filename}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                Original:
+              </span>{' '}
+              {incomingValue?.originalFilename}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Type:</span>{' '}
+              {incomingValue?.mimeType}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Size:</span>{' '}
+              {incomingValue?.fileSize}
+            </div>
+            {isPending ? (
+              <div>
+                <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                  Status:
+                </span>{' '}
+                <span className={cx('byline-field-file-meta-pending', styles['meta-pending'])}>
+                  Will upload on save
+                </span>
+              </div>
+            ) : (
+              <>
+                <div>
+                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                    Storage:
+                  </span>{' '}
+                  {incomingValue?.storageProvider}
+                </div>
+                <div>
+                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                    Path:
+                  </span>{' '}
+                  {incomingValue?.storagePath}
+                </div>
+              </>
+            )}
           </div>
         </div>
       )}
 
+      {field.helpText && <HelpText text={field.helpText} />}
+
       {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
     </div>
   )