kennel 0.2.1 → 0.2.3

package/kernel/apps/web/src/app.css

@@ -0,0 +1,332 @@
+@import "tailwindcss";
+@source "../../../packages/agents/src";
+@source "../../../packages/ui/src";
+@source "../../../plugins/calendar/src";
+@source "../../../plugins/mail/src";
+@source "../../../plugins/tasks/src";
+@source "./";
+
+@theme {
+  --font-sans: "Inter Variable", "Inter", "SF Pro Text", "Segoe UI", sans-serif;
+  --color-background: hsl(45 16% 96%);
+  --color-foreground: hsl(215 24% 12%);
+  --color-popover: hsl(0 0% 100% / 0.78);
+  --color-popover-foreground: hsl(215 24% 12%);
+  --color-muted: hsl(210 20% 95% / 0.92);
+  --color-muted-foreground: hsl(215 12% 42%);
+  --color-accent: hsl(210 24% 92% / 0.92);
+  --color-accent-foreground: hsl(154 42% 20%);
+  --color-border: hsl(210 14% 78% / 0.68);
+  --color-input: hsl(210 14% 78% / 0.68);
+  --color-ring: hsl(154 58% 34%);
+  --radius: 0.75rem;
+}
+
+:root {
+  color: var(--color-foreground);
+  background: var(--color-background);
+  font-family: var(--font-sans);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow: auto;
+  user-select: auto;
+  background:
+    radial-gradient(circle at top, rgb(255 255 255 / 0.92), transparent 38%),
+    radial-gradient(circle at 20% 16%, rgb(220 230 241 / 0.7), transparent 28%),
+    radial-gradient(
+      circle at 80% 12%,
+      rgb(235 231 244 / 0.72),
+      transparent 24%
+    ),
+    var(--color-background);
+}
+
+.folder-drop-zone {
+  padding-bottom: max(150px, var(--ask-tray-height, 0px));
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* Third-party overrides. The rules below style DOM rendered by
+   @raggle-ai/markdown and @raggle-ai/ui primitives, whose own styles are
+   unlayered CSS. Tailwind utilities live in @layer utilities and always lose
+   to unlayered styles, so these overrides must stay as plain CSS. */
+
+/* @raggle-ai/markdown/explorer.css ships an unlayered `button { color:
+   inherit }` rule, so buttons inside the folder shell lost Tailwind's
+   layered color utilities (mail filter chips computed the inherited green
+   instead of their `text-*` color). Re-arm the cascade for app content only:
+   `revert-layer` rolls back to the layered value, so utility colors apply
+   when present and buttons otherwise still inherit like preflight intends.
+   Barkdown's own chrome and the shared sidebar keep their specific rules. */
+.landing-sidebar-shell button,
+button[data-ai-toggle],
+[data-selection-ai] button,
+[data-ask-tray] button {
+  color: revert-layer;
+}
+
+button[data-ai-toggle] {
+  transition: none;
+}
+
+button[data-ai-toggle][aria-pressed="true"] {
+  background: #2f4a38;
+  border-color: #2f4a38;
+  color: white;
+}
+
+[data-slot="dialog-overlay"] {
+  background: rgb(244 241 236 / 0.34);
+  backdrop-filter: blur(24px) saturate(120%);
+}
+
+[data-barkdown] h1,
+[data-barkdown] h2,
+[data-barkdown] h3,
+[data-barkdown] h4,
+[data-barkdown] h5,
+[data-barkdown] h6 {
+  color: #18212b;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+[data-barkdown] h1 {
+  margin: 1.8rem 0 1rem;
+  font-size: clamp(2rem, 4vw, 3rem);
+}
+
+[data-barkdown] h2 {
+  margin: 1.55rem 0 0.8rem 1rem;
+  font-size: clamp(1.55rem, 3vw, 2.15rem);
+}
+
+[data-barkdown] h3 {
+  margin: 1.3rem 0 0.7rem 2rem;
+  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
+}
+
+[data-barkdown] h4 {
+  margin: 1.1rem 0 0.55rem 3rem;
+  font-size: clamp(1.05rem, 2vw, 1.3rem);
+}
+
+[data-barkdown] h5,
+[data-barkdown] h6 {
+  margin: 1rem 0 0.45rem 4rem;
+  font-size: 1rem;
+}
+
+.barkdown-explorer.shell {
+  display: block;
+}
+
+.barkdown-explorer > .sidebar {
+  position: fixed;
+  left: 0;
+  width: min(90vw, 340px);
+  border-right: 0;
+  background: #fff;
+  box-shadow: 18px 0 48px rgb(0 0 0 / 14%);
+  transform: translateX(-101%);
+  transition: transform 180ms ease;
+}
+
+.barkdown-explorer > .sidebar.is-open {
+  transform: translateX(0);
+}
+
+.barkdown-explorer > .mobile-menu {
+  position: fixed;
+  z-index: 15;
+  top: max(10px, env(safe-area-inset-top));
+  left: max(10px, env(safe-area-inset-left));
+  display: grid;
+  border: 1px solid #dedede;
+  border-radius: 9px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+}
+
+.barkdown-explorer > .scrim {
+  position: fixed;
+  z-index: 19;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: rgb(0 0 0 / 28%);
+  backdrop-filter: blur(2px);
+}
+
+.barkdown-explorer .desktop-close {
+  display: grid;
+}
+
+.barkdown-explorer .document-header {
+  padding-left: 56px;
+}
+
+[data-file-viewer] .barkdown-explorer > .sidebar {
+  width: 100%;
+  max-width: 100%;
+  transform: translateX(0);
+}
+
+[data-file-viewer] .barkdown-explorer > .mobile-menu {
+  display: none;
+}
+
+[data-file-viewer] .barkdown-explorer > .workspace {
+  display: none;
+}
+
+/* Full-page project search. The scout-ui list is normally a floating panel,
+   so reposition it to fill the page instead of hanging off an input. */
+.search-page {
+  min-height: 100vh;
+  background: #f4efe5;
+  color: #17181c;
+}
+
+.search-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 28px;
+}
+
+.search-page .scout-input-floating-panel {
+  position: static;
+  width: min(720px, calc(100vw - 24px));
+  max-height: min(70vh, 640px);
+  margin: 24px auto;
+  border-color: #d8d0c2;
+  border-radius: 16px;
+  background: #fffdf8;
+  box-shadow:
+    0 24px 80px -60px rgb(41 37 36 / 50%),
+    0 6px 20px rgb(41 37 36 / 12%);
+}
+
+.search-page .scout-project-search-inner {
+  min-height: 0;
+  max-height: inherit;
+}
+
+.search-page .scout-project-list {
+  min-height: 320px;
+  padding: 8px;
+}
+
+.search-page .scout-project-search-row {
+  padding: 8px 8px 10px;
+}
+
+.search-page .scout-project-search-input {
+  padding: 12px 14px;
+  font-size: 15px;
+  border-radius: 10px;
+  background: #f6f2ea;
+}
+/* Pop-up live indicator (kennel pop --watch) */
+.pop-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 10px 24px 0;
+  padding: 4px 10px;
+  border: 1px solid #cfdcc9;
+  border-radius: 999px;
+  background: #f0f5ec;
+  color: #54734b;
+  font-size: 0.75rem;
+  font-weight: 600;
+  width: fit-content;
+}
+.pop-live span {
+  color: #2f8f4c;
+}
+.pop-live + .markdown-page {
+  border-top: 0;
+}
+
+/* ------------------------------------------------------------------------
+   Mobile + chat side-panel presentation
+   ------------------------------------------------------------------------ */
+
+/* Keyboard-aware height: installViewportHeight() keeps --kennel-vh in sync
+   with the visual viewport so the panel never hides under the keyboard. */
+.markdown-page[data-panel] {
+  height: var(--kennel-vh, 100dvh);
+}
+
+/* embedded=1 on the document route renders edge-to-edge (the existing
+   mobile media query already does this on narrow screens; the attribute
+   extends it to desktop embedded panels without a floating card). */
+.markdown-page[data-embedded] {
+  position: fixed;
+  inset: 0;
+  max-width: none;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.markdown-page[data-embedded] .app-view-header {
+  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
+}
+
+@media (max-width: 767px) {
+  .markdown-page article {
+    padding-left: max(1rem, env(safe-area-inset-left));
+    padding-right: max(1rem, env(safe-area-inset-right));
+    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
+  }
+}
+
+/* >=44px touch targets for phone and embedded panel controls. */
+@media (max-width: 767px), (pointer: coarse) {
+  .markdown-page .app-options-trigger,
+  .barkdown-explorer .mobile-menu button,
+  [data-ask-tray] button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  [data-ask-tray] .size-7 {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.markdown-page[data-panel] .app-options-trigger {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+@media (max-width: 767px) {
+  .markdown-page[data-embedded] .app-view-header .app-folder-title > span {
+    max-width: 38vw;
+  }
+}
+
+/* Standalone mobile: keep the floating card but respect safe areas. */
+body {
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+.markdown-page[data-panel] article {
+  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-right: max(1rem, env(safe-area-inset-right));
+}