@godxjp/ui 31.26.2 → 31.28.0

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

@@ -1142,7 +1142,7 @@
     background: hsl(var(--muted));
     padding: var(--code-block-space-inset);
     color: var(--code-block-foreground, hsl(var(--foreground)));
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     font-size: var(--code-block-font-size);
     line-height: var(--code-block-line-height);
     white-space: pre-wrap;
@@ -1378,7 +1378,7 @@
   }
 
   .ui-prose :not(pre) > code {
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     font-size: var(--prose-code-font-size);
     background: hsl(var(--muted));
     padding-inline: var(--prose-code-space-inline);
@@ -1429,6 +1429,319 @@
     inline-size: auto;
   }
 
+  .ui-prose .ui-prose-callout {
+    margin-block: var(--callout-space-stack);
+    padding-block: var(--callout-space-inset-block);
+    padding-inline: var(--callout-space-inset-inline);
+    border-inline-start: var(--callout-rail-width) solid hsl(var(--info));
+    border-start-end-radius: var(--callout-radius, var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio)))));
+    border-end-end-radius: var(--callout-radius, var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio)))));
+    background-color: var(--surface-info, hsl(var(--info) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="tip"] {
+    border-inline-start-color: hsl(var(--success));
+    background-color: var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="important"] {
+    border-inline-start-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / var(--alert-bg-alpha));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="warning"] {
+    border-inline-start-color: hsl(var(--warning));
+    background-color: var(--surface-warning, hsl(var(--warning) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="caution"] {
+    border-inline-start-color: hsl(var(--destructive));
+    background-color: var(--surface-destructive, hsl(var(--destructive) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout-title {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :first-child {
+    margin-block-start: 0;
+  }
+
+  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :last-child {
+    margin-block-end: 0;
+  }
+
+  .ui-prose .ui-prose-toggle {
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-toggle-summary {
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-prose .ui-prose-toggle[open] > .ui-prose-toggle-summary {
+    margin-block-end: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-columns {
+    display: flex;
+    gap: var(--prose-columns-gap);
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-column {
+    flex: var(--prose-column-grow, 1) 1 0;
+    min-inline-size: 0;
+  }
+
+  @media (width < 40rem) {
+    .ui-prose .ui-prose-columns {
+      flex-direction: column;
+    }
+  }
+
+  .ui-block-editor {
+    position: relative;
+    padding-inline-start: var(--block-editor-gutter-inline-size);
+  }
+
+  .ui-block-editor[data-appearance="framed"] {
+    padding-block: var(--block-editor-frame-padding);
+    padding-inline-end: var(--block-editor-frame-padding);
+    border: var(--stroke-hairline) solid hsl(var(--input));
+    border-radius: var(--control-radius, var(--radius));
+    background-color: hsl(var(--background));
+    transition: border-color var(--duration-fast);
+  }
+
+  .ui-block-editor[data-appearance="framed"]:focus-within {
+    border-color: hsl(var(--ring));
+  }
+
+  .ui-block-editor[data-appearance="framed"][data-disabled] {
+    background-color: hsl(var(--muted));
+  }
+
+  .ui-block-editor-content {
+    min-block-size: var(--block-editor-min-height);
+    outline: none;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .ui-block-editor-content .is-empty::before {
+    content: attr(data-placeholder);
+    float: inline-start;
+    block-size: 0;
+    color: hsl(var(--muted-foreground));
+    pointer-events: none;
+  }
+
+  .ui-block-editor-handle {
+    position: absolute;
+    inset-inline-start: 0;
+    z-index: 1;
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  @media (hover: hover) {
+    .ui-block-editor:not(:hover):not(:focus-within) .ui-block-editor-handle {
+      opacity: 0;
+    }
+  }
+
+  .ui-block-editor-content .ProseMirror-selectednode {
+    outline: var(--stroke-md) solid hsl(var(--ring));
+    outline-offset: var(--stroke-md);
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+  }
+
+  .ui-block-editor-menu {
+    --popover-surface-inline-size: var(--block-editor-menu-inline-size);
+  }
+
+  .ui-block-editor-menu [cmdk-list] {
+    max-block-size: var(--block-editor-menu-max-block-size);
+  }
+
+  .ui-block-editor-menu-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .ui-block-editor-menu-icon svg,
+  .ui-block-editor-toolbar svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+  }
+
+  .ui-block-editor-menu-text {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+  }
+
+  .ui-block-editor-menu-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs, var(--font-size-sm));
+  }
+
+  .ui-block-editor-toolbar {
+    z-index: var(--overlay-z-index);
+    padding: var(--space-1);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--popover-radius, var(--radius));
+    background-color: hsl(var(--popover) / var(--popover-alpha, 100%));
+    color: hsl(var(--popover-foreground));
+    box-shadow: var(--popover-shadow, var(--shadow-md));
+  }
+
+  .ui-block-editor-toolbar-row,
+  .ui-block-editor-toolbar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ui-block-editor-wikilink {
+    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+  }
+
+  .ui-block-editor-embed-inline,
+  .ui-block-editor-raw-inline {
+    font-family: var(--font-family-mono);
+    font-size: var(--prose-code-font-size);
+  }
+
+  .ui-block-editor-embed,
+  .ui-block-editor-raw-block {
+    margin-block: var(--prose-space-block);
+    padding: var(--space-2) var(--space-3);
+    border: var(--stroke-hairline) dashed hsl(var(--border));
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+  }
+
+  .ui-block-editor-raw-block-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .ui-block-editor-raw-block-source {
+    margin: 0;
+    white-space: pre-wrap;
+    font-family: var(--font-family-mono);
+    font-size: var(--prose-code-font-size);
+  }
+
+  .ui-block-editor-upload {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    vertical-align: middle;
+  }
+
+  .ui-block-editor-upload svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+  }
+
+  .ui-block-editor-upload-spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-block-editor-upload-spinner {
+      animation: none;
+    }
+  }
+
+  .ui-block-editor-status {
+    margin-block-start: var(--space-2);
+  }
+
+  .ui-block-editor-callout-head,
+  .ui-block-editor-columns-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    margin-block-end: var(--space-2);
+  }
+
+  .ui-block-editor-callout-title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-block-editor-columns {
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-block-editor-columns-content > [data-node-view-content-react] {
+    display: flex;
+    gap: var(--prose-columns-gap);
+  }
+
+  @media (width < 40rem) {
+    .ui-block-editor-columns-content > [data-node-view-content-react] {
+      flex-direction: column;
+    }
+  }
+
+  .ui-block-editor-content [data-type="details"] {
+    display: flex;
+    gap: var(--space-1);
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-block-editor-content [data-type="details"] > div {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .ui-block-editor-content [data-type="detailsSummary"],
+  .ui-block-editor-content [data-type="details"] summary {
+    font-weight: var(--font-weight-medium);
+    list-style: none;
+  }
+
+  .ui-block-editor-toggle-button {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--control-height-xs);
+    block-size: var(--control-height-xs);
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+
+  .ui-block-editor-toggle-button::before {
+    content: "";
+    border-block: var(--stroke-lg) solid transparent;
+    border-inline-start: calc(var(--stroke-lg) * 1.5) solid currentColor;
+    transition: rotate var(--duration-fast);
+  }
+
+  [data-type="details"].is-open > .ui-block-editor-toggle-button::before {
+    rotate: 90deg;
+  }
+
+  .ui-block-editor-toggle-button:hover {
+    background-color: hsl(var(--accent));
+  }
+
   .ui-prose img[data-prose-preview] {
     cursor: zoom-in;
   }

package/dist/styles/focus-ring.css

@@ -37,6 +37,8 @@
     .ui-carousel-dot,
     .ui-rating-star,
     .ui-prose img[data-prose-preview],
+    .ui-prose .ui-prose-toggle-summary,
+    .ui-block-editor-toggle-button,
     a.ui-list-row,
 
     a[data-slot="card"],
@@ -107,6 +109,8 @@
       .ui-carousel-dot,
       .ui-rating-star,
       .ui-prose img[data-prose-preview],
+      .ui-prose .ui-prose-toggle-summary,
+      .ui-block-editor-toggle-button,
       a.ui-list-row,
       a[data-slot="card"],
       button[data-slot="card"],

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.26.2",
+  "version": "31.28.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -215,6 +215,19 @@
         "chart-layout.css"
       ]
     },
+    "BlockEditor": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "toggle.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "alert-layout.css",
+        "data-display-layout.css",
+        "form-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "BranchScopePicker": {
       "layers": [
         "layout.css",
@@ -460,6 +473,13 @@
         "navigation-layout.css"
       ]
     },
+    "EmojiPicker": {
+      "layers": [
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css"
+      ]
+    },
     "EmptyState": {
       "layers": [
         "layout.css"
@@ -727,6 +747,11 @@
         "dialog-layout.css"
       ]
     },
+    "PageCover": {
+      "layers": [
+        "layout.css"
+      ]
+    },
     "Pagination": {
       "layers": [
         "layout.css",

package/dist/styles/layout.css

@@ -924,6 +924,119 @@
     font-size: var(--page-title-font-size-chrome);
   }
 
+  .ui-page-container[data-header-scale="display"] .ui-page-title,
+  .ui-page-container[data-header-scale="display"] .ui-page-header .ui-page-title {
+    font-size: var(--page-title-font-size-display);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--page-title-line-height-display);
+    text-wrap: balance;
+    overflow-wrap: normal;
+  }
+
+  .ui-page-header-icon {
+    display: flex;
+    align-items: center;
+    margin-block-end: var(--space-2);
+    font-size: var(--page-icon-size);
+    line-height: 1;
+  }
+
+  .ui-page-header-icon svg {
+    inline-size: var(--page-icon-size);
+    block-size: var(--page-icon-size);
+  }
+
+  .ui-page-container[data-cover="banner"] {
+    padding-block-start: 0;
+  }
+
+  .ui-page-container[data-cover="banner"] .ui-page-header-icon {
+    position: relative;
+    margin-block-start: calc(-1 * var(--page-icon-cover-overlap));
+  }
+
+  .ui-page-header .ui-page-cover-slot {
+    margin-block-end: var(--space-4);
+  }
+
+  .ui-page-cover {
+    position: relative;
+  }
+
+  .ui-page-cover-frame {
+    position: relative;
+    overflow: hidden;
+    block-size: var(--page-cover-block-size-md);
+    background-color: hsl(var(--muted));
+  }
+
+  .ui-page-cover[data-height="lg"] .ui-page-cover-frame {
+    block-size: var(--page-cover-block-size-lg);
+  }
+
+  .ui-page-cover[data-variant="eyecatch"] .ui-page-cover-frame {
+    block-size: auto;
+    aspect-ratio: var(--page-cover-eyecatch-aspect-ratio);
+    border-radius: var(--page-cover-radius, var(--card-radius, var(--radius)));
+  }
+
+  .ui-page-cover-image {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    user-select: none;
+  }
+
+  .ui-page-cover[data-repositioning] .ui-page-cover-frame {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .ui-page-cover[data-repositioning] .ui-page-cover-frame:active {
+    cursor: grabbing;
+  }
+
+  .ui-page-cover-hint {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    margin-inline: auto;
+    inline-size: fit-content;
+    max-inline-size: calc(100% - 2 * var(--space-4));
+    translate: 0 -50%;
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-pill);
+    background-color: hsl(var(--background) / 0.85);
+    color: hsl(var(--foreground));
+    font-size: var(--font-size-sm, var(--font-size-base));
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .ui-page-cover-actions {
+    position: absolute;
+    inset-block-end: var(--space-3);
+    inset-inline-end: var(--space-3);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+  }
+
+  @media (hover: hover) and (width >= 40rem) {
+    .ui-page-cover:not(:hover):not(:focus-within) .ui-page-cover-actions {
+      opacity: 0;
+    }
+  }
+
+  @media (width < 40rem) {
+    .ui-page-cover-actions {
+      position: static;
+      justify-content: flex-end;
+      padding: var(--space-2) var(--space-page-active-x, var(--space-4)) 0;
+    }
+  }
+
   @media (max-width: 720px) {
     .ui-page-container {
       --space-page-active-x: var(--space-page-compact-x);

package/dist/tokens/components/control.css

@@ -460,6 +460,16 @@
   --control-status-warning-outline-color: initial;
 }
 
+:root {
+  --emoji-picker-cell-size: var(--control-height-default);
+
+  --emoji-picker-panel-inline-size: calc(
+    8 * var(--emoji-picker-cell-size) + 2 * var(--popover-space-inset, var(--space-3))
+  );
+  --emoji-picker-glyph-size: var(--icon-size-lg);
+  --emoji-picker-grid-max-block-size: 16rem;
+}
+
 @media (pointer: coarse) {
   :root {
     --control-height-compact: var(--band-height-xl);

package/dist/tokens/components/data-display.css

@@ -57,6 +57,15 @@
   --prose-code-space-inline: var(--space-1);
 
   --prose-cell-image-max-inline-size: 20rem;
+
+  --prose-columns-gap: var(--space-6);
+
+  --block-editor-gutter-inline-size: calc(2 * var(--control-height-xs) + var(--space-2));
+  --block-editor-min-height: var(--band-height-3xl);
+
+  --block-editor-frame-padding: var(--space-3);
+  --block-editor-menu-inline-size: 16rem;
+  --block-editor-menu-max-block-size: 20rem;
   --prose-code-radius: initial;
 
   --prose-link-color: initial;

package/dist/tokens/semantic/layout.css

@@ -91,6 +91,20 @@
 
   --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));
 
+  --page-title-font-size-display: var(
+    --font-size-4xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio))
+  );
+  --page-title-line-height-display: 1.4;
+
+  --page-icon-size: var(--icon-size-4xl);
+  --page-icon-cover-overlap: calc(var(--page-icon-size) * 0.6);
+
+  --page-cover-block-size-md: clamp(8rem, 24vw, 15rem);
+  --page-cover-block-size-lg: clamp(10rem, 32vw, 20rem);
+  --page-cover-eyecatch-aspect-ratio: 1.91;
+  --page-cover-radius: initial;
+
   --page-subtitle-font-size-chrome: var(
     --font-size-2xs,
     calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **181**
-- With ≥1 frame: **157** · zero-frame: **24**
+- Public components: **184**
+- With ≥1 frame: **160** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -50,6 +50,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
+| PageCover | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | SpaceCompact | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ResponsiveGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -100,6 +101,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CodeBlock | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Markdown | ✓ | · | · | · | · | · | · | · | · | · |
 | MarkdownEditor | ✓ | · | · | · | · | · | · | · | · | · |
+| BlockEditor | ✓ | · | · | · | · | · | · | · | · | · |
 | Prose | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Timeline | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | TimelineGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -192,6 +194,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | AreaChart | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | PieChart | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CommandPalette | ✓ | N/A | · | · | · | · | · | · | · | · |
+| EmojiPicker | ✓ | · | · | · | · | · | · | · | · | · |
 | TwoFactorSetup | ✓ | N/A | · | · | · | · | · | · | · | · |
 | AuthDivider | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AuthFooter | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |