@ketvietlab/ketsuite 0.1.25 → 0.1.30

package/dist/modules/backend/design/content.css

@@ -609,11 +609,6 @@
     :where([data-ui="action"], [data-control="action"])[data-size] {
       min-block-size: var(--admin-field-height);
     }
-    [data-ui="modal-layer"][data-presentation="dialog"]
-      [data-ui="relation-dialog-actions"]
-      [data-ui="action"][data-size="compact"] {
-      min-block-size: var(--admin-field-height);
-    }
     :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size] {
       inline-size: var(--admin-field-height);
     }
@@ -669,3 +664,46 @@
     }
   }
 }
+
+@layer ket.app {
+  [data-ui="page-context-viewer"][data-placement="topbar"] {
+    --admin-ink: var(--kv-app-topbar-text);
+    --admin-ink-secondary: var(--kv-app-topbar-text);
+    --admin-ink-muted: var(--kv-app-topbar-muted);
+    min-block-size: var(--kv-touch-target);
+    max-inline-size: 24rem;
+  }
+  @media (max-width: 48rem) {
+    [data-ui="page-context-viewer"][data-placement="topbar"] {
+      min-inline-size: var(--kv-touch-target);
+      justify-content: center;
+    }
+    [data-ui="page-context-viewer"][data-placement="topbar"] [data-ui="page-context-copy"] {
+      display: none;
+    }
+  }
+}
+
+@layer ket.app {
+  [data-ui="app-location-bar"] [data-ui="page-context-viewer"] {
+    max-inline-size: 24rem;
+  }
+  @media (max-width: 48rem) {
+    [data-ui="app-location-bar"] [data-ui="page-context-viewer"] {
+      min-inline-size: var(--kv-touch-target);
+      min-block-size: var(--kv-touch-target);
+      justify-content: center;
+    }
+    [data-ui="app-location-bar"] [data-ui="page-context-copy"] {
+      display: inline-flex;
+      min-inline-size: 0;
+    }
+    [data-ui="app-location-bar"] [data-ui="page-context-viewer"] {
+      max-inline-size: 100%;
+      justify-content: flex-start;
+    }
+    [data-ui="app-location-bar"] [data-ui="page-context-icon"] {
+      display: none;
+    }
+  }
+}

package/dist/modules/backend/design/forms.css

@@ -131,235 +131,6 @@
     font: inherit;
   }
 
-  /* Relational selectors keep the short path compact and put full CRUD in the
-     modal. The footer action remains visible even when the relation is empty. */
-  [data-ui="relation-select"] {
-    position: relative;
-    inline-size: 100%;
-    min-inline-size: 0;
-  }
-  [data-ui="relation-native"] {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inline-size: 1px;
-    block-size: 1px;
-    opacity: 0;
-    pointer-events: none;
-  }
-  [data-ui="relation-trigger"] {
-    display: flex;
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--admin-field-height);
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--admin-gap-sm);
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-    /* The same type metrics as [data-ui="form-control"]. Without them the button
-       inherits the body's larger line box and stands 2px taller than every other
-       control on the row. */
-    font-size: 0.875rem;
-    line-height: 1.3;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-trigger"][data-empty="true"] {
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="relation-trigger"]:focus-visible {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-    outline: none;
-  }
-  [data-ui="relation-value"] {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  /* A multi-valued relation shows what it holds beneath the trigger, so the
-     trigger itself stays an "add another" affordance at a fixed height. */
-  [data-ui="relation-chips"] {
-    display: flex;
-    flex-wrap: wrap;
-    margin: var(--admin-gap-xs) 0 0;
-    padding: 0;
-    gap: var(--admin-gap-xs);
-    list-style: none;
-  }
-  [data-ui="relation-chip"] {
-    display: inline-flex;
-    align-items: center;
-    max-inline-size: 100%;
-    gap: 0.25rem;
-    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink);
-  }
-  [data-ui="relation-chip"] > span {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="relation-chip-clear"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
-    flex: none;
-    padding: 0;
-    border: 0;
-    border-radius: var(--admin-radius-sm);
-    background: transparent;
-    color: var(--admin-ink-muted);
-    font: inherit;
-    line-height: 1;
-    cursor: pointer;
-  }
-  [data-ui="relation-chip-clear"]:is(:hover, :focus-visible) {
-    color: var(--admin-ink);
-  }
-  [data-ui="relation-chip-clear"]:focus-visible {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 1px;
-  }
-  [data-ui="relation-option"][data-selected="true"]::after,
-  [data-ui="relation-dialog-row"][data-selected="true"] [data-ui="relation-dialog-main"] strong::after {
-    content: " ✓";
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="relation-menu"] {
-    position: absolute;
-    inset-block-start: calc(100% + 0.25rem);
-    inset-inline: 0;
-    z-index: 40;
-    display: grid;
-    min-inline-size: min(22rem, calc(100vw - 2rem));
-    overflow: hidden;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-  [data-ui="relation-search"] {
-    inline-size: calc(100% - var(--admin-gap-sm) * 2);
-    min-block-size: var(--admin-field-height);
-    margin: var(--admin-gap-sm);
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-  }
-  [data-ui="relation-options"] {
-    display: grid;
-    max-block-size: 16rem;
-    overflow: auto;
-  }
-  [data-ui="relation-option"] {
-    display: grid;
-    min-block-size: var(--admin-control-height);
-    padding: 0.375rem 0.625rem;
-    border: 0;
-    background: transparent;
-    color: var(--admin-ink);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-option"]:is(:hover, :focus-visible),
-  [data-ui="relation-option"][aria-selected="true"] {
-    background: var(--admin-accent-soft);
-    outline: none;
-  }
-  [data-ui="relation-option"] small {
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="relation-footer"] {
-    display: flex;
-    justify-content: flex-start;
-    padding: var(--admin-gap-xs) var(--admin-gap-sm);
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="relation-dialog-toolbar"] {
-    display: flex;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    margin-block-end: var(--admin-gap);
-  }
-  [data-ui="relation-dialog-toolbar"] [data-ui="form-control"] {
-    flex: 1 1 auto;
-  }
-  [data-ui="relation-dialog-list"] {
-    display: grid;
-    margin: 0;
-    padding: 0;
-    border-block-start: 1px solid var(--admin-line);
-    list-style: none;
-  }
-  [data-ui="relation-dialog-row"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    padding: var(--admin-gap-sm) 0;
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="relation-dialog-main"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: 0.125rem;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--admin-ink);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-dialog-main"]:focus-visible {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 2px;
-  }
-  [data-ui="relation-dialog-meta"] {
-    overflow: hidden;
-    color: var(--admin-ink-muted);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="relation-dialog-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="relation-editor"] {
-    display: grid;
-    gap: var(--admin-gap);
-    margin-block-end: var(--admin-gap);
-    padding: var(--admin-gap);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-subtle);
-  }
-  [data-ui="relation-empty"] {
-    margin: 0;
-    padding: var(--admin-gap);
-    color: var(--admin-ink-muted);
-    text-align: center;
-  }
   [data-ui="modal-sheet"][data-size="large"] {
     inline-size: min(56rem, calc(100vw - var(--admin-gap-lg)));
   }
@@ -1193,6 +964,37 @@
       margin-block-start: 0;
     }
   }
+
+  /* A record form in a narrow column (a record aside, a side panel) puts its
+     labels above their controls whatever the viewport: beside them, the 7-9rem
+     label track takes a third of the column. The record form is the container.
+     `:root` matches the specificity of the FormPage rhythm above, so a narrow
+     column wins inside a FormPage too. */
+  @container record-form (max-width: 28rem) {
+    :is([data-ui="form-page"], :root)
+      [data-ui="record-form"][data-layout="default"]
+      > [data-ui="form-grid"]
+      > [data-ui="form-field"]:not([data-kind="checkbox"]) {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      row-gap: var(--admin-gap-xs);
+    }
+    :is([data-ui="form-page"], :root)
+      [data-ui="record-form"][data-layout="default"]
+      > [data-ui="form-grid"]
+      > [data-ui="form-field"]:not([data-kind="checkbox"])
+      > :is(
+        [data-ui="form-label"],
+        [data-ui="form-control"],
+        [data-ui="form-options"],
+        [data-ui="form-help"],
+        [data-ui="form-error"],
+        ket-island
+      ) {
+      grid-column: 1;
+      margin-block-start: 0;
+    }
+  }
 }
 
 @layer ket.app {
@@ -1208,4 +1010,103 @@
     inline-size: 100%;
     min-inline-size: 0;
   }
+
+  /* The image owns a column beside the form. Both remain in flow, so adding
+     identity fields or wrapping image actions cannot cover an input. */
+  [data-ui="record-form-with-image"] {
+    --record-image-size: 6rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--record-image-size);
+    gap: var(--space-4, 16px);
+    align-items: start;
+  }
+  [data-ui="record-form-with-image"] > [data-ui="record-image"] {
+    position: static;
+  }
+  [data-ui="record-form-with-image"] > [data-ui="record-form"] {
+    min-inline-size: 0;
+  }
+  [data-ui="record-image"] {
+    display: grid;
+    justify-items: center;
+    gap: var(--space-1, 4px);
+    inline-size: var(--record-image-size, 6rem);
+  }
+  [data-ui="record-image-frame"] {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: var(--record-image-size, 6rem);
+    block-size: var(--record-image-size, 6rem);
+    overflow: hidden;
+    border: 1px solid var(--admin-divider-subtle);
+    border-radius: var(--radius-md, 7px);
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="record-image-frame"] [data-ui="lightbox-thumb"] {
+    --lightbox-thumb-size: var(--record-image-size, 6rem);
+    border: 0;
+    border-radius: 0;
+  }
+  [data-ui="record-image-empty"] {
+    padding: var(--space-2, 8px);
+    color: var(--admin-ink-muted);
+    font-size: var(--font-size-xs, 0.8125rem);
+    text-align: center;
+  }
+  [data-ui="record-image"][data-record-dropzone] [data-ui="record-image-empty"] {
+    align-self: stretch;
+    justify-self: stretch;
+    display: grid;
+    place-items: center;
+    border: 1px dashed var(--admin-line-strong);
+    border-radius: inherit;
+  }
+  [data-ui="record-image"][data-drag="1"] [data-ui="record-image-frame"] {
+    outline: 2px dashed var(--admin-focus-border);
+    outline-offset: 2px;
+    background: var(--admin-card);
+  }
+  [data-ui="record-image"][data-busy="true"] [data-ui="record-image-frame"] {
+    opacity: 0.6;
+  }
+  [data-ui="record-image-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0 var(--space-2, 8px);
+    font-size: var(--font-size-xs, 0.8125rem);
+  }
+  [data-ui="record-image-upload"] {
+    position: relative;
+    color: var(--admin-accent-text);
+    cursor: pointer;
+  }
+  [data-ui="record-image-upload"] input[type="file"] {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+  [data-ui="record-image-upload"]:focus-within {
+    outline: 2px solid var(--admin-focus-border);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm, 5px);
+  }
+  [data-ui="record-image-actions"] [data-ui="action"] {
+    min-block-size: 0;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  @media (max-width: 47.9375rem) {
+    [data-ui="record-form-with-image"] > [data-ui="record-image"] {
+      margin-block-end: 0;
+    }
+    [data-ui="record-form-with-image"] {
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: stretch;
+    }
+  }
 }

package/dist/modules/backend/design/foundation.css

@@ -84,60 +84,10 @@
     min-block-size: 0;
   }
 
-  [data-ui="navigation-context"] [data-ui="sidebar-search"] {
-    margin: 0.5rem 0 0;
-  }
-
   [data-ui="navigation-footer"] {
     padding: 0;
   }
 
-  /* The menu search, not the record search. This one narrows the sidebar; the
-     one in the control panel narrows the list. Both are GET forms. */
-  [data-ui="sidebar-search"] {
-    position: relative;
-    flex-shrink: 0;
-    margin: 0 0.75rem 0.625rem;
-  }
-
-  [data-ui="sidebar-search-icon"] {
-    position: absolute;
-    inset-inline-start: 0.625rem;
-    inset-block-start: 50%;
-    display: grid;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    place-items: center;
-    color: var(--admin-ink-muted);
-    pointer-events: none;
-    transform: translateY(-50%);
-  }
-
-  [data-ui="sidebar-search-input"] {
-    inline-size: 100%;
-    padding: 0.4375rem 0.625rem 0.4375rem 1.875rem;
-    border: 1px solid var(--admin-control-border);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-control-bg);
-    color: var(--admin-ink);
-    font: inherit;
-    font-size: 0.875rem;
-    line-height: 1.3;
-    outline: none;
-    transition:
-      border-color var(--admin-motion-fast),
-      box-shadow var(--admin-motion-fast);
-  }
-
-  [data-ui="sidebar-search-input"]::placeholder {
-    color: var(--admin-placeholder);
-  }
-
-  [data-ui="sidebar-search-input"]:focus {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-  }
-
   [data-ui="sidebar-empty"] {
     margin: 0.5rem;
     color: var(--admin-ink-muted);
@@ -162,7 +112,6 @@
     block-size: 1em;
   }
 
-  [data-ui="sidebar-search-icon"] > [data-ui="icon"],
   [data-ui="chrome-search-icon"] > [data-ui="icon"],
   [data-ui="chrome-search-toggle"] > [data-ui="icon"],
   [data-ui="indicator-icon"] > [data-ui="icon"],

package/dist/modules/backend/design/lists.css

@@ -43,8 +43,13 @@
   /* A ListPage command bar keeps query controls bounded on the left while the
      pager and view controls remain anchored to the far edge. */
   [data-ui="list-chrome"][data-layout="command"] [data-ui="list-chrome-row"] {
+    flex-wrap: wrap;
     gap: var(--admin-gap-sm);
   }
+  [data-ui="list-chrome"][data-layout="command"] [data-ui="chrome-tools"] {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
 
   [data-ui="list-chrome"][data-layout="command"] [data-ui="chrome-search"] {
     inline-size: auto;
@@ -53,10 +58,72 @@
     flex: 1 1 24rem;
   }
 
+  /* Whatever query parameters a list still owns itself — which site's content
+     this is, which property, which reporting range — reach the chrome as a
+     disclosure beside the filter bar. It has to behave like the other chrome
+     menus: a button-sized trigger that keeps the row one line high, and a panel
+     that floats over the table instead of prising the row apart and clipping
+     its own submit button. */
+  [data-ui="chrome-tools"] > [data-ui="disclosure"] {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  [data-ui="chrome-tools"] > [data-ui="disclosure"] > [data-ui="disclosure-summary"] {
+    display: inline-flex;
+    block-size: var(--admin-control-height);
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding-inline: var(--admin-gap);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-size: var(--admin-size-sm);
+    font-weight: 650;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  [data-ui="chrome-tools"] > [data-ui="disclosure"][open] > [data-ui="disclosure-summary"],
+  [data-ui="chrome-tools"] > [data-ui="disclosure"] > [data-ui="disclosure-summary"]:hover,
+  [data-ui="chrome-tools"] > [data-ui="disclosure"] > [data-ui="disclosure-summary"]:focus-visible {
+    background: var(--admin-surface-hover);
+  }
+
+  [data-ui="chrome-tools"] > [data-ui="disclosure"] > [data-ui="disclosure-body"] {
+    position: absolute;
+    z-index: 40;
+    inset-block-start: calc(100% + var(--admin-gap-xs));
+    inset-inline-end: 0;
+    display: grid;
+    min-inline-size: 16rem;
+    max-inline-size: min(28rem, calc(100vw - 2 * var(--admin-gap)));
+    padding: var(--admin-gap);
+    gap: var(--admin-gap-sm);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+
   [data-ui="list-chrome"][data-layout="command"] [data-ui="chrome-tail"] {
+    flex-wrap: wrap;
+    max-inline-size: 100%;
+    justify-content: flex-end;
     margin-inline-start: auto;
   }
 
+  /* The new filter island replaces only the legacy query control, and shares
+     its bounded, flexible footprint beside paging and view choice. */
+  [data-ui="list-chrome"][data-layout="command"] [data-ui="chrome-search-content"] {
+    min-inline-size: 0;
+    flex: 1 1 24rem;
+    inline-size: auto;
+    max-inline-size: 50rem;
+  }
+
   [data-ui="list-page"][data-variant="operational"]
     [data-ui="list-chrome"][data-layout="command"]
     [data-ui="chrome-lead"]:empty {
@@ -120,7 +187,11 @@
     text-decoration: none;
   }
 
-  [data-ui="bulk-form"] {
+  [data-ui="bulk-form"][hidden] {
+    display: none;
+  }
+
+  [data-ui="bulk-form"]:not([hidden]) {
     display: block;
   }
 
@@ -129,7 +200,7 @@
     display: none;
   }
 
-  [data-ui="app-shell"]:has([data-ui="row-select"]:checked) [data-ui="bulk-actions"] {
+  [data-ui="bulk-form"]:not([hidden]) > [data-ui="bulk-actions"] {
     display: block;
   }
 
@@ -420,7 +491,8 @@
     font-weight: 700;
   }
 
-  [data-ui="custom-filter"] {
+  /* Legacy route filter forms only; SearchFilter owns its island editor contract. */
+  [data-ui="custom-filter"]:where(:not([data-ui="search-filter"] *)) {
     display: grid;
     gap: 0.375rem;
     margin: 0.375rem 0 0;
@@ -429,9 +501,9 @@
     border-block-start: 1px solid var(--admin-line);
   }
 
-  [data-ui="custom-filter"] select,
-  [data-ui="custom-filter"] input,
-  [data-ui="custom-filter"] button {
+  [data-ui="custom-filter"]:where(:not([data-ui="search-filter"] *)) select,
+  [data-ui="custom-filter"]:where(:not([data-ui="search-filter"] *)) input,
+  [data-ui="custom-filter"]:where(:not([data-ui="search-filter"] *)) button {
     min-block-size: 2rem;
     border: 1px solid var(--admin-control-border);
     border-radius: var(--admin-radius-sm);
@@ -440,7 +512,7 @@
     font: inherit;
   }
 
-  [data-ui="custom-filter"] button {
+  [data-ui="custom-filter"]:where(:not([data-ui="search-filter"] *)) button {
     background: var(--admin-accent);
     color: var(--admin-accent-ink);
     cursor: pointer;

package/dist/modules/backend/design/user-workflow.css

@@ -160,26 +160,6 @@
   align-items: center;
   gap: 12px;
 }
-.user-action-bar button,
-.user-action-bar a {
-  padding: 9px 16px;
-  border: 1px solid var(--kv-panel-border);
-  border-radius: var(--kv-radius-md);
-  background: var(--kv-panel-bg);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  text-decoration: none;
-}
-.user-action-bar .primary {
-  background: var(--kv-accent);
-  color: white;
-  border-color: var(--kv-accent);
-}
-.user-action-bar button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
 .user-notice {
   padding: 16px;
   background: var(--kv-panel-bg-subtle);

package/dist/modules/backend/global-search.d.ts

@@ -0,0 +1,3 @@
+import type { Route, ServeContext } from '@ketvietlab/ketjs';
+export declare const globalSearch: (ctx: ServeContext) => Route;
+//# sourceMappingURL=global-search.d.ts.map

package/dist/modules/backend/global-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search.d.ts","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/modules/backend/global-search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAY,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAuCtE,eAAO,MAAM,YAAY,QACjB,YAAY,KAAG,KA2EpB,CAAA"}