@godxjp/ui 28.10.0 → 28.12.0

package/dist/props/registry.d.ts

@@ -3170,7 +3170,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ServiceLauncherCardProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/service-launcher-card.tsx";
-        readonly vocabulary: readonly ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp"];
+        readonly vocabulary: readonly ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp", {
+            readonly field: "logo";
+            readonly local: true;
+            readonly reason: "URL of the service's OWN uploaded mark, distinct from `icon` (the LucideIcon for its kind) and deliberately NOT folded into it: `icon` is the fallback the tile needs when the upload 404s or does not exist yet, so the two cannot be one prop. A `string` URL rather than a ReactNode because the medallion owns the box, the object-fit and the decode hint (gh#850).";
+        }];
     };
     readonly ServiceCatalogCtaProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -3763,7 +3763,18 @@ const COMPONENT_PROP_REGISTRY = {
   ServiceLauncherCardProp: {
     group: "data-display",
     file: "components/data-display/service-launcher-card.tsx",
-    vocabulary: ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp"]
+    vocabulary: [
+      "TitleProp",
+      "ToneProp",
+      "IconProp",
+      "ClassNameProp",
+      "DisabledProp",
+      {
+        field: "logo",
+        local: true,
+        reason: "URL of the service's OWN uploaded mark, distinct from `icon` (the LucideIcon for its kind) and deliberately NOT folded into it: `icon` is the fallback the tile needs when the upload 404s or does not exist yet, so the two cannot be one prop. A `string` URL rather than a ReactNode because the medallion owns the box, the object-fit and the decode hint (gh#850)."
+      }
+    ]
   },
   ServiceCatalogCtaProp: {
     group: "data-display",

package/dist/styles/card-layout.css

@@ -574,6 +574,12 @@
     height: var(--card-service-launcher-icon-glyph-size);
   }
 
+  [data-slot="service-launcher-logo"] {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+    object-fit: contain;
+  }
+
   [data-slot="service-launcher-identity"] {
     display: flex;
     min-width: 0;

package/dist/styles/control.css

@@ -1160,7 +1160,7 @@
     align-items: stretch;
     padding: var(--segmented-track-padding);
     border-radius: var(--segmented-track-radius);
-    background: hsl(var(--segmented-track-background));
+    background: hsl(var(--segmented-track-background, var(--muted)));
     color: hsl(var(--segmented-item-color));
     font-size: var(--font-size-base);
   }
@@ -1196,7 +1196,7 @@
   }
 
   .ui-segmented-item[data-state="checked"] {
-    background: hsl(var(--segmented-item-selected-background));
+    background: hsl(var(--segmented-item-selected-background, var(--background)));
 
     box-shadow:
       var(--segmented-item-selected-shadow),

package/dist/styles/data-entry-layout.css

@@ -1,7 +1,250 @@
 @layer components {
 
-  .ui-attachments-input {
-    min-block-size: var(--touch-target-min);
+  .ui-attachments {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .ui-attachments-list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--attachments-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-attachments-list > li {
+    position: relative;
+    display: flex;
+    flex: none;
+    min-inline-size: 0;
+  }
+
+  .ui-attachments-list[data-overflow="wrap"] {
+    flex-wrap: wrap;
+  }
+
+  .ui-attachments-list[data-overflow="scrollX"] {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .ui-attachments-list[data-overflow="scrollY"] {
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-block-size: var(--attachments-card-block-size);
+  }
+
+  .ui-attachments-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--attachments-card-gap);
+    inline-size: var(--attachments-card-size);
+
+    max-inline-size: 100%;
+    block-size: var(--attachments-card-block-size);
+    padding-block: var(--space-3);
+    padding-inline: var(--space-4);
+    border: var(--stroke-hairline) solid transparent;
+    border-radius: var(--attachments-card-radius);
+    background-color: hsl(var(--muted));
+    overflow: hidden;
+  }
+
+  .ui-attachments-card-preview,
+  .ui-attachments-card-placeholder {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon-size-2xl);
+    block-size: var(--icon-size-2xl);
+  }
+
+  .ui-attachments-card-preview {
+    border-radius: var(--radius-md);
+    object-fit: cover;
+  }
+
+  .ui-attachments-card-placeholder {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-card-placeholder > svg {
+    inline-size: var(--icon-size-2xl);
+    block-size: var(--icon-size-2xl);
+  }
+
+  .ui-attachments-card-content {
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .ui-attachments-card-name {
+    display: flex;
+    max-inline-size: 100%;
+    font-size: var(--font-size-base);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-attachments-card-name-prefix {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-attachments-card-name-suffix {
+    flex: none;
+  }
+
+  .ui-attachments-card-meta {
+    overflow: hidden;
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    color: hsl(var(--muted-foreground));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-attachments-card[data-status="error"] {
+    border-color: hsl(var(--text-error));
+  }
+
+  .ui-attachments-card[data-status="error"] .ui-attachments-card-meta {
+    color: hsl(var(--text-error));
+  }
+
+  .ui-attachments-card-progress {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: block;
+  }
+
+  .ui-attachments-card-remove {
+    flex: none;
+  }
+
+  .ui-attachments-card-remove > svg {
+    inline-size: var(--attachments-remove-icon-size);
+    block-size: var(--attachments-remove-icon-size);
+  }
+
+  .ui-attachments-upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: var(--attachments-card-block-size);
+    block-size: var(--attachments-card-block-size);
+    border: var(--stroke-hairline) dashed hsl(var(--border));
+    border-radius: var(--attachments-card-radius);
+    background-color: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+
+  .ui-attachments-upload-btn:hover:not(:disabled) {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+  }
+
+  .ui-attachments-upload-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ui-attachments-upload-btn > svg {
+    inline-size: var(--icon-size-xl);
+    block-size: var(--icon-size-xl);
+  }
+
+  .ui-attachments-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--attachments-placeholder-gap);
+    padding: var(--attachments-placeholder-space-inset);
+    border: var(--stroke-md) dashed hsl(var(--border));
+    border-radius: var(--attachments-placeholder-radius);
+    background-color: hsl(var(--muted) / 0.4);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      background-color 150ms ease;
+  }
+
+  .ui-attachments-placeholder[data-drag-active="true"] {
+    border-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / 0.05);
+  }
+
+  .ui-attachments-placeholder:not([data-drag-active="true"]):hover {
+    border-color: hsl(var(--primary) / 0.5);
+  }
+
+  .ui-attachments-placeholder[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.25;
+    pointer-events: none;
+  }
+
+  .ui-attachments-placeholder-icon {
+    display: flex;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-placeholder-icon > svg {
+    inline-size: var(--attachments-placeholder-icon-size);
+    block-size: var(--attachments-placeholder-icon-size);
+  }
+
+  .ui-attachments-placeholder-title {
+    font-size: var(--attachments-placeholder-title-font-size);
+    font-weight: var(--font-weight-medium);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-attachments-placeholder-description {
+    font-size: var(--attachments-placeholder-description-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-drop-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border: var(--stroke-md) dashed hsl(var(--primary));
+    border-radius: var(--attachments-placeholder-radius);
+    background: var(
+      --attachments-drop-overlay-background,
+      color-mix(in srgb, hsl(var(--background)) 85%, transparent)
+    );
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .ui-attachments-drop-layer[data-active="true"] {
+    opacity: 1;
+    backdrop-filter: blur(10px);
+  }
+
+  .ui-attachments-drop-layer[data-scope="viewport"] {
+    position: fixed;
   }
 
   .ui-combobox-content {

package/dist/tokens/components/attachments.css

@@ -1,15 +1,24 @@
 
 :root {
+
   --attachments-gap: var(--space-2);
-  --attachments-card-size: var(--upload-tile-size);
-  --attachments-card-radius: var(--upload-tile-radius);
-  --attachments-card-gap: var(--upload-tile-space-gap);
-  --attachments-placeholder-space-inset: var(--upload-dropzone-space-inset);
-  --attachments-placeholder-radius: var(--upload-dropzone-radius);
-  --attachments-placeholder-icon-size: var(--upload-dropzone-icon-size);
-  --attachments-placeholder-title-font-size: var(--font-size-sm, var(--font-size-base));
-  --attachments-placeholder-description-font-size: var(--upload-dropzone-meta-font-size);
-  --attachments-placeholder-gap: var(--space-2);
+
+  --attachments-card-size: 16.75rem;
+  --attachments-card-block-size: 4.25rem;
+  --attachments-card-radius: var(--radius-lg);
+  --attachments-card-gap: var(--space-3);
+
+  --attachments-placeholder-space-inset: var(--space-4);
+  --attachments-placeholder-radius: var(
+    --radius-lg
+  );
+
+  --attachments-placeholder-icon-size: var(--icon-size-3xl);
+  --attachments-placeholder-title-font-size: var(--font-size-base);
+  --attachments-placeholder-description-font-size: var(--font-size-sm, var(--font-size-base));
+  --attachments-placeholder-gap: var(--space-1);
+
   --attachments-drop-overlay-background: initial;
+
   --attachments-remove-icon-size: var(--upload-remove-icon-size);
 }

package/dist/tokens/components/segmented.css

@@ -4,7 +4,7 @@
 
   --segmented-track-padding: calc(var(--space-1) / 2);
 
-  --segmented-track-background: var(--muted);
+  --segmented-track-background: initial;
 
   --segmented-track-radius: var(--radius);
   --segmented-item-radius: var(--radius-md);
@@ -27,7 +27,7 @@
   --segmented-item-hover-background: initial;
   --segmented-item-active-background: var(--secondary);
 
-  --segmented-item-selected-background: var(--background);
+  --segmented-item-selected-background: initial;
   --segmented-item-selected-shadow: var(--shadow-md);
 
   --segmented-item-selected-font-weight: var(--font-weight-medium);

package/docs/DESIGN-AUTHORITY.md

@@ -463,6 +463,44 @@ expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mappe
   (`src/props/components/data-entry.prop.ts`) and in the MCP catalog. Revisit if a `Space`/compact
   primitive is ever ported — then antd's steer is followable and this becomes a migration.
 
+- **`Attachments` is Ant Design X's card and tray, with five measured departures (gh#855).** The
+  component had shipped with NO stylesheet at all — fifteen slot classes, one rule, twelve tokens
+  read by nothing — so the port below is the first time it followed anything. Geometry was taken
+  from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` for root/placeholder/drop-area,
+  `es/file-card/style/index.js` for list/card/overflow/remove), not from a screenshot. What was
+  NOT followed, and why:
+
+  1. **The card's 268px is a CEILING, not a fixed width.** Ant X writes `width: 268` flat. At the
+     320px viewport this repo sweeps, 268 plus the page gutter spills, and `check:frame-overflow`
+     is the gate that would have to be baselined around it. `inline-size` + `max-inline-size: 100%`
+     keeps Ant's box everywhere it fits and gives ground only where the alternative is a clip.
+  2. **One leading box for a thumbnail AND a glyph.** Ant X has two card types — a 268x68 overview
+     card and a separate 68x68 image card — so a tray mixing a `.png` with a `.pdf` gets two
+     shapes. This library already decided that question for `Upload` (gh#720: "the image rows draw
+     their previewUrl as a thumbnail and every other row draws the glyph for its kind, on one row
+     height"), and a second answer in the same group would be the defect.
+  3. **The remove ✕ is always visible, and in flow.** Ant X pins it absolutely outside the card
+     corner at `opacity: 0` until the card is hovered. A hover-only control has no touch
+     equivalent — worse, an `opacity: 0` button is still hit-testable, so a tablet user taps a
+     control they cannot see. `.ui-upload-tile-remove` already made this call. Always-visible in
+     turn removes the reason to position it outside the box, so it is the row's trailing item.
+  4. **The placeholder mark is the icon scale's 40px step, not `fontSizeHeading2` (30px).** 30 is
+     not one of the nine steps gh#326 fixed, and its neighbours are 24 and 36 — equidistant. The
+     token keeps the value the frozen table in `src/tokens/__tests__/icon-size-scale.test.ts`
+     already records for it, which is `--upload-dropzone-icon-size`: the mark a reader meets this
+     surface beside. Same reasoning holds `--attachments-remove-icon-size` at 14px against Ant's
+     `fontSizeLG` = 16.
+  5. **The placeholder carries a dashed border at rest; Ant X's is `transparent`.** Ant X's
+     placeholder sits INSIDE a `Sender`, which already draws the boundary. Here `Attachments` is
+     also used standalone, where a target with no edge is not a target — so it takes
+     `.ui-upload-dropzone`'s dashed edge.
+
+  Not ported, and named here so the gap is a decision rather than an oversight: Ant X's 8px
+  `::before`/`::after` scroll-edge gradients and their `ping-start`/`ping-end` state (they need a
+  scroll listener, and the clipped card already reads as "more this way"), and its full-screen
+  drop area — `getDropContainer` positions the layer `fixed`, but activation is still the
+  control's own dragenter, not the document's.
+
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/assets/service-mark-rose.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="96" viewBox="0 0 240 96" role="img">
+  <rect width="240" height="96" rx="12" fill="hsl(348 32% 42%)"/>
+  <rect x="24" y="30" width="36" height="36" rx="8" fill="hsl(348 32% 88%)"/>
+  <rect x="76" y="36" width="140" height="10" rx="5" fill="hsl(348 32% 88%)"/>
+  <rect x="76" y="54" width="96" height="10" rx="5" fill="hsl(348 32% 74%)"/>
+</svg>

package/docs/assets/service-mark-teal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img">
+  <rect width="128" height="128" rx="28" fill="hsl(178 38% 34%)"/>
+  <path d="M40 78 L64 34 L88 78 Z" fill="hsl(178 38% 88%)"/>
+  <circle cx="64" cy="90" r="9" fill="hsl(178 38% 88%)"/>
+</svg>