@k2b/cloud 0.38.0 → 0.39.0

package/src/styles/panel.css

@@ -0,0 +1,373 @@
+/* Panel slot: one provider page in a same-origin iframe beside the app.
+   From 1024 px it is a column after the app card and the app card narrows;
+   from 768 to 1023 px a non-modal drawer over the right edge; below 768 px a
+   sheet from the bottom. The canvas carries the state from the cloud_panel
+   cookie, so the server draws the first frame. Loading, failure, the resize
+   shield and the closing hint are stacked in the body and only change their
+   visibility, so nothing ever moves inside the reserved box. */
+.cloud-panel {
+  --cloud-panel-width: var(--cloud-panel-width-set, 26rem);
+  position: relative;
+  display: none;
+  min-height: 0;
+  color: var(--k2b-text);
+}
+
+@media not all and (min-width: 1280px) {
+  .cloud-panel {
+    --cloud-panel-width: var(--cloud-panel-width-set, 21.5rem);
+  }
+}
+
+/* The same surface, radius, frame and dark border as the app card. */
+.cloud-panel__card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--cloud-card-radius, var(--k2b-radius-dialog));
+  background: var(--k2b-surface);
+  box-shadow: var(--k2b-shadow-frame);
+}
+
+.dark .cloud-panel__card {
+  border-color: var(--k2b-border);
+}
+
+/* One 46 px row, no line below; the provider's page starts right under it. */
+.cloud-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 2.875rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.5rem;
+}
+
+.cloud-panel__head .k2b-icon-button .ti {
+  font-size: 1.125rem;
+}
+
+.cloud-panel__title {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-start: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.cloud-panel__title > .ti {
+  flex: none;
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__title > span,
+.cloud-panel__tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cloud-panel__tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 0.125rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.cloud-panel__tab {
+  display: inline-flex;
+  flex: none;
+  max-width: 12rem;
+  height: 2rem;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: var(--k2b-radius-control);
+  background: transparent;
+  color: var(--k2b-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cloud-panel__tab > .ti {
+  flex: none;
+  font-size: 1rem;
+}
+
+.cloud-panel__tab:hover {
+  background: var(--k2b-hover);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab[aria-selected="true"] {
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab:focus-visible,
+.cloud-panel__grabber:focus-visible {
+  outline: 2px solid var(--k2b-focus-ring);
+  outline-offset: -2px;
+}
+
+.cloud-panel__body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.cloud-panel__body > :is(.cloud-panel__skeleton, .cloud-panel__frame, .cloud-panel__fallback, .cloud-panel__shield, .cloud-panel__closing) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.cloud-panel[data-state="ready"] .cloud-panel__frame,
+.cloud-panel[data-state="failed"] .cloud-panel__fallback,
+.cloud-panel[data-resizing="true"] .cloud-panel__shield,
+.cloud-panel[data-closing="true"] .cloud-panel__closing {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* A loading page already takes focus and keys; the skeleton covers it until it reports ready. */
+.cloud-panel[data-state="loading"] .cloud-panel__frame {
+  visibility: visible;
+}
+
+.cloud-panel[data-state="loading"] .cloud-panel__skeleton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.cloud-panel__frame {
+  display: block;
+  border: 0;
+  background: var(--k2b-surface);
+}
+
+.cloud-panel__skeleton {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--k2b-surface);
+  pointer-events: none;
+}
+
+.cloud-panel__skeleton > span {
+  display: block;
+  height: 0.75rem;
+  border-radius: 0.375rem;
+  background: var(--k2b-surface-muted);
+}
+
+.cloud-panel__skeleton > span:nth-child(2) {
+  width: 85%;
+}
+
+.cloud-panel__skeleton > span:last-child {
+  width: 60%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-k2b-motion="reduced"]) .cloud-panel[data-state="loading"] .cloud-panel__skeleton > span {
+    animation: cloud-panel-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes cloud-panel-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.cloud-panel__fallback {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--k2b-surface);
+}
+
+/* Takes the pointer from the iframe while the separator drags. */
+.cloud-panel__shield {
+  z-index: 2;
+  cursor: col-resize;
+}
+
+/* Dragging clearly below 20 rem: the panel fades and says what release does. */
+.cloud-panel__closing {
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--k2b-surface) 82%, transparent);
+  pointer-events: none;
+}
+
+.cloud-panel__closing > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--k2b-radius-control);
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.cloud-panel__closing .ti {
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__grabber {
+  display: none;
+}
+
+/* The separator sits in the gap at the panel's start edge. */
+.cloud-panel__resize {
+  position: absolute !important;
+  inset-block: 0;
+  inset-inline-start: calc(-6px - var(--cloud-card-inset, 0.5rem) / 2);
+  z-index: 4;
+}
+
+/* Column: the app area is the AppWorkspace host, so the app lays out by its narrowed width. */
+@media (min-width: 1024px) {
+  .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+    display: block;
+    flex: none;
+    align-self: stretch;
+    width: var(--cloud-panel-width);
+    margin-inline-start: var(--cloud-card-inset, 0.5rem);
+  }
+
+  .cloud-app-canvas[data-panel="open"] > [data-cloud-app-area] {
+    container: k2b-app-area / inline-size;
+  }
+}
+
+/* Drawer: over the app's right edge; the app keeps its width. Not modal. */
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+      position: absolute;
+      z-index: 20;
+      inset-block: calc(0.5rem + env(safe-area-inset-top, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px));
+      inset-inline-end: calc(0.5rem + env(safe-area-inset-right, 0px));
+      display: block;
+      width: min(var(--cloud-panel-width), calc(100% - 1rem));
+    }
+
+    .cloud-panel__card {
+      border-radius: var(--k2b-radius-dialog);
+      box-shadow: var(--k2b-shadow-float);
+    }
+
+    .cloud-panel__resize {
+      display: none !important;
+    }
+  }
+}
+
+/* Sheet: from the bottom, a little over half the height; the grabber makes it full. */
+@media not all and (min-width: 768px) {
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel {
+    position: fixed;
+    z-index: 30;
+    inset-inline: 0;
+    bottom: 0;
+    display: block;
+    height: 58dvh;
+  }
+
+  /* The page's last row scrolls up above the sheet. Only the end of the page
+     grows, so nothing above it moves; full pages own their own scrollers. */
+  .cloud-app-canvas[data-layout-authenticated][data-panel-sheet="open"]:not([data-layout-full-page]) .layout-content-main {
+    padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+    scroll-padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+  }
+
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel[data-panel-size="full"] {
+    height: calc(100dvh - 2.875rem - env(safe-area-inset-top, 0px));
+  }
+
+  .cloud-panel__card {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    border-radius: 1.125rem 1.125rem 0 0;
+    box-shadow: 0 -10px 36px rgb(9 9 11 / 0.18);
+  }
+
+  .dark .cloud-panel__card {
+    border-bottom-color: transparent;
+    box-shadow: 0 -10px 36px rgb(0 0 0 / 0.5);
+  }
+
+  .cloud-panel__grabber {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .cloud-panel__grabber > span {
+    width: 2.375rem;
+    height: 0.3125rem;
+    border-radius: 999px;
+    background: var(--k2b-border-strong);
+  }
+
+  .cloud-panel__head {
+    padding-top: 0;
+  }
+
+  .cloud-panel__resize {
+    display: none !important;
+  }
+}
+
+@media print {
+  .cloud-panel {
+    display: none !important;
+  }
+}
+
+/* The provider's page inside the iframe: the panel surface from the first paint. */
+.cloud-panel-page {
+  display: flex;
+  height: 100dvh;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--k2b-surface);
+}
+
+html:has([data-cloud-panel-page]),
+html:has([data-cloud-panel-page]) body {
+  background: var(--k2b-surface);
+}

package/src/styles/tokens.css

@@ -15,7 +15,16 @@
   --ui-hover: rgb(239 240 239 / 0.9);
   --ui-active: rgb(229 231 230 / 0.94);
   --ui-selected: color-mix(in srgb, var(--color-blue-500) 7%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  /* app-color.ts computes these defaults from --color-blue-500; app-color.test.ts pins them. */
+  --app-ink-light: #2264c9;
+  --app-ink-dark: #589aff;
+  --app-selected-light: #f0f6ff;
+  --app-selected-dark: #15243b;
+  --app-selected-nav-light: #e0e8f6;
+  --app-selected-nav-dark: #22334e;
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 45%, transparent);
   --ui-action-primary-surface: var(--color-zinc-900);
@@ -143,7 +152,9 @@
   --ui-hover: #252c35;
   --ui-active: color-mix(in srgb, var(--ui-hover) 72%, var(--ui-border-strong));
   --ui-selected: color-mix(in srgb, var(--color-blue-400) 12%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-400) 55%, transparent);
   --ui-action-primary-surface: var(--color-zinc-100);
@@ -186,23 +197,29 @@
   --ui-shadow-workspace-edge: -3px 0 6px -5px rgb(0 0 0 / 0.28), 3px 0 6px -5px rgb(0 0 0 / 0.28);
 }
 
-/* App appearance is applied on the canvas rather than :root. Recompute the
-   derived accent roles here so an app never inherits the platform fallback. */
+/* Custom properties resolve where declared. Each app scope must re-read its
+   inline per-app values instead of inheriting the resolved platform defaults. */
 .cloud-app-canvas,
 .app-accent-scope {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   /* Portable UI components consume their own optional hook; Cloud alone maps
      it to the active app appearance. */
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }
 
 .dark :is(.cloud-app-canvas, .app-accent-scope) {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }

package/src/styles/utilities-navigation.css

@@ -226,12 +226,12 @@
 @utility sidebar-item-active {
   position: relative;
   background: var(--ui-selected);
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   @apply font-medium;
   box-shadow: var(--ui-shadow-surface);
 
   &:hover {
-    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+    color: var(--ui-app-accent-text);
   }
 
   &::before {
@@ -241,14 +241,6 @@
   }
 }
 
-.dark .sidebar-item-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
-}
-
-.dark .sidebar-item-active:hover {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
-}
-
 @utility sidebar-item-meta {
   @apply mt-0.5 text-left text-xs leading-tight text-dimmed;
 }
@@ -723,12 +715,12 @@
   border-left: 0;
   position: relative;
   background: var(--ui-selected);
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   @apply rounded-lg font-medium;
   box-shadow: var(--ui-shadow-surface);
 
   &:hover {
-    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+    color: var(--ui-app-accent-text);
   }
 
   &::before {
@@ -738,14 +730,6 @@
   }
 }
 
-.dark .list-item-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
-}
-
-.dark .list-item-active:hover {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
-}
-
 @utility section-label {
   @apply text-[0.6875rem] font-medium normal-case tracking-normal mb-5 text-dimmed select-none;
 }
@@ -1115,7 +1099,7 @@
 }
 
 .sidebar-icon-action-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   background: var(--ui-selected);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 20%, transparent);
 }