@k2b/cloud 0.6.0-rc.0 → 0.7.0

package/src/styles/input.css

@@ -14,45 +14,47 @@ button[disabled],
   -webkit-appearance: none;
 }
 
-/* Global Checkbox Styling */
-input[type="checkbox"] {
-  @apply appearance-none w-4 h-4 border cursor-pointer transition-all duration-200 inline-flex items-center justify-center m-0 align-middle rounded;
-  border-color: var(--ui-check-border);
-  background: var(--ui-check-surface);
-  box-shadow: var(--ui-check-shadow);
-}
-
-input[type="checkbox"]::before {
-  content: "\ea5e";
-  font-family: "tabler-icons";
-  @apply text-transparent text-xs leading-none transition-colors duration-200;
-}
-
-input[type="checkbox"]:checked {
-  @apply bg-blue-500 border-blue-500;
-  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.35);
-}
-
-input[type="checkbox"]:checked::before {
-  @apply text-white;
-}
-
-input[type="checkbox"]:hover {
-  transform: var(--ui-check-hover-transform);
-}
-
-input[type="checkbox"]:focus {
-  @apply outline-none;
-}
-
-input[type="checkbox"]:focus-visible {
-  @apply focus-ui;
-}
-
-input[type="checkbox"]:disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
-input[type="checkbox"]:disabled:hover {
-  transform: none;
+/* Native checkbox defaults must not override controls owned by UI components. */
+@layer base {
+  input[type="checkbox"] {
+    @apply appearance-none w-4 h-4 border cursor-pointer transition-all duration-200 inline-flex items-center justify-center m-0 align-middle rounded;
+    border-color: var(--ui-check-border);
+    background: var(--ui-check-surface);
+    box-shadow: var(--ui-check-shadow);
+  }
+
+  input[type="checkbox"]::before {
+    content: "\ea5e";
+    font-family: "tabler-icons";
+    @apply text-transparent text-xs leading-none transition-colors duration-200;
+  }
+
+  input[type="checkbox"]:checked {
+    @apply bg-blue-500 border-blue-500;
+    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.35);
+  }
+
+  input[type="checkbox"]:checked::before {
+    @apply text-white;
+  }
+
+  input[type="checkbox"]:hover {
+    transform: var(--ui-check-hover-transform);
+  }
+
+  input[type="checkbox"]:focus {
+    @apply outline-none;
+  }
+
+  input[type="checkbox"]:focus-visible {
+    @apply focus-ui;
+  }
+
+  input[type="checkbox"]:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  input[type="checkbox"]:disabled:hover {
+    transform: none;
+  }
 }

package/src/styles/resource-search.css

@@ -0,0 +1,505 @@
+/* Cloud-owned search composition; controls and scroll fades come from @k2b/ui. */
+.cloud-search-dialog {
+  /* Anchor to the expanded footprint, not the changing content height. */
+  --search-expanded-height: 34rem;
+  --search-top: max(0.75rem, env(safe-area-inset-top, 0px), calc((100dvh - var(--search-expanded-height)) / 2));
+  --search-max-height: calc(var(--ui-dialog-available-height) - var(--search-top));
+  position: fixed;
+  inset: var(--search-top) auto auto 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  padding: 0;
+  width: min(56rem, var(--ui-dialog-available-width));
+  max-width: none;
+  max-height: var(--search-max-height);
+  overflow: hidden;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-frame);
+  background: var(--ui-dialog-surface);
+  color: var(--k2b-text);
+  box-shadow: var(--ui-shadow-float);
+}
+.cloud-search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.35);
+  backdrop-filter: blur(5px);
+}
+.cloud-search-dialog__content {
+  min-height: 0;
+  max-height: inherit;
+}
+.cloud-resource-search {
+  --search-body-height: max(0px, min(26rem, calc(var(--search-max-height) - 12rem)));
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  padding: 0.5rem;
+  min-height: 0;
+  max-height: var(--search-max-height);
+}
+.cloud-resource-search__title {
+  grid-area: 1 / 1;
+  padding: 0.875rem 1.125rem 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+.cloud-resource-search .cloud-resource-search__close {
+  position: absolute;
+  right: 0.875rem;
+  top: 1.125rem;
+  z-index: 1;
+}
+.cloud-resource-search__input {
+  grid-area: 2 / 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 1rem 3rem 1rem 1.125rem;
+}
+.cloud-resource-search__input > i {
+  flex: none;
+  width: 1.25rem;
+  font-size: 1.25rem;
+  color: var(--k2b-text-muted);
+}
+.cloud-resource-search__field {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+.cloud-resource-search__field input {
+  flex: 1;
+  min-width: 5rem;
+  width: 100%;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  outline: none;
+  font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: -0.025em;
+}
+.cloud-resource-search__field input::placeholder {
+  color: var(--k2b-text-muted);
+  opacity: 1;
+}
+.cloud-resource-search__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.375rem;
+  background: var(--k2b-selected);
+  color: var(--color-blue-600);
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.dark .cloud-resource-search__tag {
+  color: var(--color-blue-300);
+}
+.cloud-resource-search__tag.is-unknown {
+  color: var(--color-amber-600);
+}
+.cloud-resource-search__body {
+  grid-area: 3 / 1;
+  max-height: var(--search-body-height);
+  overscroll-behavior: contain;
+}
+.cloud-resource-search.has-results .cloud-resource-search__body {
+  height: var(--search-body-height);
+}
+.cloud-resource-search__idle {
+  padding: 0.375rem 1.125rem 1.5rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.8125rem;
+}
+.cloud-resource-search__quick {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  min-height: 1.75rem;
+}
+.cloud-resource-search__quick > button {
+  min-width: 0;
+}
+.cloud-resource-search__quick > button:last-child {
+  flex-shrink: 0;
+}
+.cloud-resource-search__quick .k2b-button__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.cloud-resource-search__tag-skeleton {
+  flex: 0 1 3.5rem;
+  height: 1.75rem;
+  border-radius: var(--k2b-radius-control);
+  background: var(--k2b-surface-muted);
+}
+.cloud-resource-search__count {
+  padding: 0 1.125rem 0.5rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__results {
+  padding: 0 0.375rem 1rem;
+}
+.cloud-resource-search__group {
+  padding: 0.875rem 0.75rem 0.375rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+  font-weight: 500;
+}
+.cloud-resource-search__group:first-child {
+  padding-top: 0.25rem;
+}
+.cloud-resource-search__result {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  width: 100%;
+  min-height: 3.5rem;
+  margin-bottom: 0.125rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  text-align: left;
+  cursor: pointer;
+}
+.cloud-resource-search__result > i {
+  flex: none;
+  width: 1.25rem;
+  color: var(--k2b-text-muted);
+  font-size: 1rem;
+}
+.cloud-resource-search__result:hover {
+  background: var(--k2b-hover);
+}
+.cloud-resource-search__result.is-active,
+.cloud-resource-search__result.is-selected {
+  background: var(--k2b-selected);
+}
+.cloud-resource-search__result-copy {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.1875rem;
+}
+.cloud-resource-search__result-copy > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+.cloud-resource-search__result-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__hint {
+  padding: 0.5rem 1.125rem 1.5rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.8125rem;
+}
+.cloud-resource-search__tag-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0 1.125rem 0.5rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__tags {
+  padding: 0 0.375rem 1rem;
+}
+.cloud-resource-search__tag-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.6875rem 0.75rem;
+  border-radius: 0.5rem;
+  text-align: left;
+  cursor: pointer;
+}
+.cloud-resource-search__tag-option:hover,
+.cloud-resource-search__tag-option.is-active {
+  background: var(--k2b-selected);
+}
+.cloud-resource-search__tag-option > i {
+  flex: none;
+  color: var(--k2b-text-muted);
+}
+.cloud-resource-search__tag-option > span {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.cloud-resource-search__tag-option strong {
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+.cloud-resource-search__tag-option small {
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__tag-option code {
+  max-width: 35%;
+  overflow-wrap: anywhere;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__footer {
+  grid-area: 4 / 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1.125rem 0.5rem;
+}
+.cloud-resource-search__keys {
+  display: flex;
+  flex: 1;
+  gap: 0.875rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.625rem;
+}
+.cloud-resource-search__selection {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--k2b-text-muted);
+  font-size: 0.6875rem;
+}
+.cloud-resource-search__preview {
+  display: none;
+  min-width: 0;
+  padding: 1.25rem;
+  border-radius: 0.6875rem;
+  background: var(--ui-surface-muted);
+}
+.cloud-resource-search__preview-app {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1.75rem;
+  padding-right: 2rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+.cloud-resource-search__preview h2 {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 1.1875rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.45;
+}
+.cloud-resource-search__preview dl {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
+  gap: 0.75rem 0.5rem;
+  margin: 1.75rem 0 0;
+  font-size: 0.75rem;
+}
+.cloud-resource-search__preview dt {
+  color: var(--k2b-text-muted);
+  overflow-wrap: anywhere;
+}
+.cloud-resource-search__preview dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.cloud-resource-search__preview p {
+  margin-top: 1.75rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.8125rem;
+  line-height: 1.85;
+  overflow-wrap: anywhere;
+}
+.cloud-resource-search__image {
+  width: 100%;
+  max-height: 12rem;
+  object-fit: contain;
+  margin-top: 1.25rem;
+  border-radius: 0.5rem;
+}
+.cloud-resource-search .cloud-resource-search__back {
+  display: none;
+}
+.cloud-resource-search :is(.cloud-resource-search__result, .cloud-resource-search__tag-option, .cloud-resource-search__tag):focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: -2px;
+}
+@media (min-width: 48rem) {
+  .cloud-resource-search {
+    grid-template-columns: minmax(0, 1fr) 19rem;
+    gap: 0 0.625rem;
+  }
+  .cloud-resource-search__input {
+    padding-right: 1rem;
+  }
+  .cloud-resource-search__preview {
+    display: block;
+    grid-column: 2;
+    grid-row: 1 / 5;
+  }
+  .cloud-resource-search .cloud-resource-search__details {
+    display: none;
+  }
+}
+@media (max-width: 47.999rem) {
+  .cloud-search-dialog {
+    --search-expanded-height: 36rem;
+  }
+  .cloud-resource-search {
+    --search-body-height: max(0px, min(28rem, calc(var(--search-max-height) - 12rem)));
+  }
+  .cloud-resource-search__input {
+    padding-left: 0.625rem;
+    gap: 0.5625rem;
+  }
+  .cloud-resource-search__field input {
+    font-size: 1.125rem;
+  }
+  .cloud-resource-search__result {
+    padding-inline: 0.625rem;
+  }
+  .cloud-resource-search__results {
+    padding-inline: 0;
+  }
+  .cloud-resource-search__hint,
+  .cloud-resource-search__idle,
+  .cloud-resource-search__footer,
+  .cloud-resource-search__count,
+  .cloud-resource-search__tag-heading {
+    padding-inline: 0.625rem;
+  }
+  .cloud-resource-search.shows-details .cloud-resource-search__body {
+    display: none;
+  }
+  .cloud-resource-search.shows-details .cloud-resource-search__preview {
+    display: block;
+    grid-area: 3 / 1;
+    max-height: var(--search-body-height);
+  }
+  .cloud-resource-search.shows-details .cloud-resource-search__back {
+    display: inline-flex;
+    margin-bottom: 1rem;
+  }
+  .cloud-resource-search.shows-details .cloud-resource-search__details {
+    display: none;
+  }
+}
+
+/* Border grips belong only to desktop Spotlight, never the resource picker. */
+.cloud-search-dialog:has(.cloud-global-search) {
+  overflow: visible;
+}
+.cloud-global-search {
+  border-radius: inherit;
+}
+.cloud-global-search > .cloud-resource-search {
+  z-index: 1;
+  background: var(--ui-dialog-surface);
+  border-radius: var(--ui-radius-frame);
+  overflow: hidden;
+}
+.cloud-search-dialog[data-modeless="true"] {
+  --search-max-height: calc(100dvh - 1.5rem);
+  z-index: 100;
+}
+.cloud-global-search [data-search-grip] {
+  display: none;
+}
+.cloud-global-search[data-movable="true"] [data-search-grip] {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  cursor: grab;
+  touch-action: none;
+}
+.cloud-global-search[data-dragging="true"] [data-search-grip] {
+  cursor: grabbing;
+}
+.cloud-global-search [data-search-grip="top"] {
+  top: -8px;
+  left: -8px;
+  right: -8px;
+  height: 16px;
+}
+.cloud-global-search [data-search-grip="bottom"] {
+  bottom: -8px;
+  left: -8px;
+  right: -8px;
+  height: 16px;
+}
+.cloud-global-search [data-search-grip="left"] {
+  left: -8px;
+  top: 8px;
+  bottom: 8px;
+  width: 16px;
+}
+.cloud-global-search [data-search-grip="right"] {
+  right: -8px;
+  top: 8px;
+  bottom: 8px;
+  width: 16px;
+}
+
+.cloud-global-search__home {
+  display: none;
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+  place-items: center;
+  background: color-mix(in srgb, var(--ui-dialog-surface) 82%, transparent);
+  backdrop-filter: blur(8px);
+  border-radius: var(--ui-radius-frame);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 35%, transparent);
+  color: var(--k2b-text-muted);
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+.cloud-global-search__home > div {
+  display: grid;
+  justify-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+}
+.cloud-global-search__home i {
+  font-size: 1.75rem;
+}
+.cloud-global-search__home[data-ready="true"] {
+  /* Keep the release cue visible when the dragged search overlaps its target. */
+  z-index: 3;
+  background: color-mix(in srgb, var(--k2b-focus-ring) 12%, var(--ui-dialog-surface) 88%);
+  color: var(--k2b-focus-ring);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k2b-focus-ring) 45%, transparent);
+}
+.cloud-global-search[data-dragging="true"] .cloud-global-search__home {
+  display: grid;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cloud-global-search__home {
+    transition: none;
+  }
+}

package/src/styles/utilities-feedback.css

@@ -230,3 +230,16 @@
   background: var(--ui-surface-raised);
   box-shadow: var(--ui-shadow-float) !important;
 }
+
+/* Approval prose follows the surrounding review fields, not document typography. */
+.k2b-ui .k2b-content-markdown.cloud-ai-approval-detail {
+  font-size: inherit;
+  line-height: 1.6667;
+  color: var(--k2b-text-muted);
+}
+.k2b-ui .cloud-ai-approval-detail strong {
+  color: var(--k2b-text);
+  font-size: inherit;
+  font-weight: 600;
+}
+.k2b-ui .cloud-ai-approval-detail p + p { margin-top: .75rem; }

package/src/styles/utilities-layout.css

@@ -144,10 +144,6 @@
   gap: 0;
 }
 
-.app-workspace:has(> .workspace-content) > .workspace-sidebar-mobile {
-  grid-area: mobile;
-}
-
 .app-workspace:has(> .workspace-content) > .workspace-content {
   grid-area: content;
 }
@@ -238,7 +234,7 @@
 }
 
 /* Shared shell frame and overview composition. */
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .cloud-app-canvas .layout-header {
     padding: 0.375rem 0.75rem 0.375rem 1.125rem;
     border-color: transparent;

package/src/styles/utilities-navigation.css

@@ -135,13 +135,9 @@
   @apply lg:hidden flex flex-col gap-3;
 }
 
-@utility sidebar-mobile-toggle {
-  @apply sidebar-header cursor-pointer select-none list-none;
-}
 
-@utility sidebar-mobile-actions {
-  @apply flex flex-wrap gap-2;
-}
+
+
 
 @utility sidebar-item-mobile {
   @apply btn-input btn-input-sm;
@@ -888,7 +884,7 @@
   }
 }
 
-@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
+@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
   .layout-profile-preferences__link,
   .layout-profile-preferences__panel {
     display: flex;
@@ -899,20 +895,6 @@
   }
 }
 
-/* Keep the 46px header for wider desktop viewports. Compact and 14-inch
-   laptop widths stay rail-only, while viewports wider than 1536px retain the
-   header. Because it becomes display:none, the shell flex gap adds no empty
-   top row or double spacing. */
-@media (min-width: 768px) and (max-width: 96rem) {
-  .cloud-app-canvas[data-layout-authenticated="true"] .layout-header {
-    display: none;
-  }
-
-  .cloud-app-canvas[data-layout-authenticated="true"] .layout-profile-preferences[data-placement="rail"] {
-    display: inline-flex;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .layout-profile-preferences__link,
   .layout-profile-preferences__dropdown-trigger,
@@ -960,24 +942,6 @@
   padding: 0 0.25rem;
 }
 
-.workspace-sidebar-mobile > details {
-  overflow: hidden;
-  border: 0;
-  border-radius: 0;
-  background: var(--ui-surface-subtle);
-  box-shadow: none;
-}
-
-.workspace-sidebar-mobile .sidebar-mobile-toggle {
-  min-height: 2.75rem;
-  padding: 0.375rem 0.625rem;
-}
-
-.workspace-sidebar-mobile .sidebar-mobile-actions {
-  gap: var(--ui-space-control);
-  padding: 0 0.625rem 0.625rem;
-}
-
 .sidebar-header-icon {
   width: 1.4375rem;
   height: 1.4375rem;

package/src/types/ambient.d.ts

@@ -7,6 +7,11 @@ declare module "*.md" {
   export default content;
 }
 
+declare module "*.sql" {
+  const content: string;
+  export default content;
+}
+
 declare module "*.sh" {
   const content: string;
   export default content;