@crisp-ui-kit/crisp 0.34.0 → 0.35.0

package/dist/styles.css

@@ -511,6 +511,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* mirror of the rule above, for stickyLast's trailing column (#327) */
+    & .crisp-table-scroll[data-scrolled-x-end] [data-sticky-edge-end] { clip-path: inset(0 0 0 -38px); box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .crisp-datatable-addcell { padding: 0; border-top: none; }
     & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -534,7 +536,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -547,10 +554,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -836,6 +844,68 @@
   }
 }
 
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}
+
 .crisp-formfield {
   display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/styles.layered.css

@@ -512,6 +512,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* mirror of the rule above, for stickyLast's trailing column (#327) */
+    & .crisp-table-scroll[data-scrolled-x-end] [data-sticky-edge-end] { clip-path: inset(0 0 0 -38px); box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .crisp-datatable-addcell { padding: 0; border-top: none; }
     & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -535,7 +537,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -548,10 +555,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -837,6 +845,68 @@
   }
 }
 
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}
+
 .crisp-formfield {
   display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/types/components/datatable/datatable.d.ts

@@ -129,6 +129,12 @@ export type DataTableProps<T extends {
     onEdit?: (id: string, key: string, value: string) => void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
+    /** Sticky the LAST column with a horizontal scroll shadow, mirroring
+     * `stickyFirst` (default false — additive, so an existing table's trailing
+     * column doesn't start pinning without being asked). Follows reading
+     * direction like `stickyFirst` does: it pins to the trailing edge, which is
+     * the left edge under `dir="rtl"` (#288). */
+    stickyLast?: boolean;
     /** BCP 47 locale for the built-in `date`/`number`/`currency` renderers
      * (default "en-US"). Formats the date and groups the number the way that
      * locale's readers expect — e.g. "mn-MN" renders a date as "2026.09.12"
@@ -163,7 +169,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/filldoc/filldoc.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { type FillSheetColumn } from "../fillsheet";
+/** A heading, a paragraph, or a sheet. */
+export type FillDocBlock = {
+    id: string;
+    type: "heading";
+    text: string;
+} | {
+    id: string;
+    type: "text";
+    text: string;
+} | {
+    id: string;
+    type: "table";
+    columns: FillSheetColumn[];
+    value: string[][];
+    /** The sheet's accessible name; see FillSheet's `label`. */
+    label?: string;
+};
+export type FillDocProps = {
+    /** The document, in order. */
+    blocks: FillDocBlock[];
+    /** Every edit comes back through here — typing, inserting, removing. */
+    onBlocksChange?: (next: FillDocBlock[]) => void;
+    /**
+     * `edit` is the person who MAKES the document: they can type anywhere and
+     * add or remove blocks. `fill` is the person who fills it in — the prose is
+     * fixed and only the sheets take input.
+     */
+    mode?: "edit" | "fill";
+    /** `a4` is a real page; `auto` grows to its content. */
+    page?: "a4" | "auto";
+    /** The document's accessible name. No English default — see FillSheet. */
+    label?: string;
+    /** Copy for the insert controls. English defaults, overridable. */
+    addTextLabel?: string;
+    addHeadingLabel?: string;
+    addTableLabel?: string;
+    removeLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children">;
+/**
+ * A page you can write on, of which a sheet is one block.
+ *
+ * FillSheet is the table; this is the document it sits in. The two share a
+ * look on purpose -- a real page, real margins, square corners, and nothing
+ * drawn that is not content -- and the same split between the person who
+ * MAKES a form and the person who fills it in: in `edit` you write the prose
+ * and add or remove blocks, in `fill` the prose is fixed and only the sheets
+ * take input.
+ *
+ * Every block's controls are hidden until the pointer is in that block. A
+ * page covered in handles and grips stops looking like a page, which is the
+ * whole thing this is for.
+ */
+export declare const FillDoc: React.ForwardRefExoticComponent<{
+    /** The document, in order. */
+    blocks: FillDocBlock[];
+    /** Every edit comes back through here — typing, inserting, removing. */
+    onBlocksChange?: (next: FillDocBlock[]) => void;
+    /**
+     * `edit` is the person who MAKES the document: they can type anywhere and
+     * add or remove blocks. `fill` is the person who fills it in — the prose is
+     * fixed and only the sheets take input.
+     */
+    mode?: "edit" | "fill";
+    /** `a4` is a real page; `auto` grows to its content. */
+    page?: "a4" | "auto";
+    /** The document's accessible name. No English default — see FillSheet. */
+    label?: string;
+    /** Copy for the insert controls. English defaults, overridable. */
+    addTextLabel?: string;
+    addHeadingLabel?: string;
+    addTableLabel?: string;
+    removeLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filldoc/filldoc.recipe.d.ts

@@ -0,0 +1,201 @@
+declare const spec: {
+    readonly name: "filldoc";
+    readonly base: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: `var(--${string})`;
+        readonly boxSizing: "border-box";
+        readonly width: "210mm";
+        readonly minHeight: "297mm";
+        readonly padding: "20mm";
+        readonly margin: "0 auto";
+        readonly background: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly lineHeight: "22px";
+        readonly color: `var(--${string})`;
+        readonly borderRadius: "0";
+        readonly boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 0 1px var(--${string}), 0 4px 8px -4px var(--${string}), 0 4px 12px -2px var(--${string})`;
+    };
+    readonly parts: [{
+        readonly selector: "&:focus, &:focus-visible";
+        readonly decls: {
+            readonly outline: "none";
+        };
+    }, {
+        readonly slot: "block";
+        readonly selector: "& .crisp-filldoc-block";
+        readonly decls: {
+            readonly position: "relative";
+        };
+    }, {
+        readonly slot: "heading";
+        readonly selector: "& .crisp-filldoc-heading";
+        readonly decls: {
+            readonly margin: "0";
+            readonly fontSize: `var(--${string})`;
+            readonly fontWeight: `var(--${string})`;
+            readonly lineHeight: "26px";
+            readonly color: `var(--${string})`;
+            readonly whiteSpace: "pre-wrap";
+            readonly overflowWrap: "break-word";
+        };
+    }, {
+        readonly slot: "paragraph";
+        readonly selector: "& .crisp-filldoc-text";
+        readonly decls: {
+            readonly margin: "0";
+            readonly fontSize: `var(--${string})`;
+            readonly lineHeight: "22px";
+            readonly color: `var(--${string})`;
+            readonly whiteSpace: "pre-wrap";
+            readonly overflowWrap: "break-word";
+        };
+    }, {
+        readonly slot: "writer";
+        readonly selector: "& .crisp-filldoc-writer";
+        readonly decls: {
+            readonly display: "block";
+            readonly width: "100%";
+            readonly margin: "0";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly outline: "none";
+            readonly background: "transparent";
+            readonly fontFamily: "inherit";
+            readonly fontSize: "inherit";
+            readonly fontWeight: "inherit";
+            readonly lineHeight: "inherit";
+            readonly color: "inherit";
+            readonly resize: "none";
+            readonly overflow: "hidden";
+            readonly userSelect: "text";
+            readonly WebkitUserSelect: "text";
+        };
+    }, {
+        readonly slot: "inserter";
+        readonly selector: "& .crisp-filldoc-insert";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetInlineStart: "0";
+            readonly insetInlineEnd: "0";
+            readonly insetBlockEnd: `calc(var(--${string}) / -2)`;
+            readonly height: `var(--${string})`;
+            readonly display: "flex";
+            readonly alignItems: "center";
+            readonly gap: `var(--${string})`;
+            readonly opacity: "0";
+            readonly transition: "opacity .1s";
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within";
+        readonly decls: {
+            readonly opacity: "1";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-insert-rule";
+        readonly decls: {
+            readonly flex: "1";
+            readonly height: "1px";
+            readonly background: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "insertButton";
+        readonly selector: "& .crisp-filldoc-insert button";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly height: "20px";
+            readonly padding: `0 var(--${string})`;
+            readonly border: "none";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `var(--${string})`;
+            readonly fontFamily: "inherit";
+            readonly fontSize: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-insert button:hover";
+        readonly decls: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "blockTools";
+        readonly selector: "& .crisp-filldoc-tools";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetInlineEnd: "100%";
+            readonly insetBlockStart: "0";
+            readonly paddingInlineEnd: `var(--${string})`;
+            readonly display: "flex";
+            readonly gap: `var(--${string})`;
+            readonly opacity: "0";
+            readonly transition: "opacity .1s";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within";
+        readonly decls: {
+            readonly opacity: "1";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-tools button";
+        readonly decls: {
+            readonly width: "20px";
+            readonly height: "20px";
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly justifyContent: "center";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: "transparent";
+            readonly fontFamily: "inherit";
+            readonly fontSize: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-tools button:hover";
+        readonly decls: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    }];
+    readonly variants: {
+        readonly page: {
+            readonly a4: {};
+            readonly auto: {
+                readonly width: "100%";
+                readonly minHeight: "0";
+                readonly maxWidth: "210mm";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly page: "a4";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly page: {
+        readonly a4: string;
+        readonly auto: string;
+    };
+}>;
+export declare const filldocRecipe: import("../..").RecipeFn<{
+    readonly page: {
+        readonly a4: string;
+        readonly auto: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly page: {
+            readonly a4: string;
+            readonly auto: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

package/dist/types/components/filldoc/index.d.ts

@@ -0,0 +1,3 @@
+export { FillDoc, type FillDocBlock, type FillDocProps } from "./filldoc";
+export { filldocRecipe } from "./filldoc.recipe";
+export { docToHTML, docToMarkdown } from "./serialize";

package/dist/types/components/filldoc/serialize.d.ts

@@ -0,0 +1,5 @@
+import type { FillDocBlock } from "./filldoc";
+/** An HTML document body: what Word, Google Docs and Pages paste as a document. */
+export declare function docToHTML(blocks: FillDocBlock[]): string;
+/** The same document as Markdown. */
+export declare function docToMarkdown(blocks: FillDocBlock[]): string;