@valentinkolb/cloud 0.1.0

package/src/styles/effects.css

@@ -0,0 +1,65 @@
+/* Hover, cursor, and shimmer effects */
+@utility hover-shadow {
+  &:hover {
+    box-shadow: var(--theme-shadow-hover);
+  }
+}
+
+@utility bg-dark {
+  @apply bg-[var(--color-dark)];
+}
+
+@utility no-scrollbar {
+  ::-webkit-scrollbar {
+    display: none; /* Chrome, Safari und Opera */
+  }
+
+  -ms-overflow-style: none; /* IE und Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility ellipsis {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+@utility animate-cursor {
+  animation: cursor-blink 1s step-end infinite;
+}
+
+@keyframes cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@utility shimmer {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -50%;
+    background: linear-gradient(
+      115deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.25) 50%,
+      transparent 100%
+    );
+    animation: shimmer 5s ease-in-out infinite;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/styles/global.css

@@ -0,0 +1,133 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* global.css carries cloud-lib classes — UI primitives, layouts, shared
+   components — and is served to every container via the gateway. Apps must
+   NOT be scanned here; per-app classes come from each app's own app.css. */
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (html:not(.dark) &);
+
+@import "@tabler/icons-webfont/dist/tabler-icons.css";
+@import "@fontsource-variable/jetbrains-mono";
+@import "./tokens.css";
+@import "./utilities-buttons.css";
+@import "./utilities-layout.css";
+@import "./utilities-navigation.css";
+@import "./utilities-feedback.css";
+@import "./base-popover.css";
+@import "./effects.css";
+@import "./input.css";
+
+@theme {
+  --color-dark: rgb(9 9 11);
+  --color-selection-bg: rgb(147 197 253 / 0.45);
+  --color-selection-fg: rgb(15 23 42);
+}
+
+:root {
+  --theme-shadow-elevated: none;
+  --theme-shadow-hover: none;
+  --theme-input-py: 0.375rem;
+  --theme-input-px: 0.5rem;
+  --theme-list-active-border: none;
+  --theme-list-inactive-border: none;
+  --theme-list-active-bg: rgb(244 244 245);
+  --theme-list-hover-bg: rgb(250 250 250);
+  --theme-list-padding: 0.5rem 0.75rem;
+  --theme-tab-active-border: none;
+  --theme-tab-inactive-border: none;
+  --theme-tab-active-bg: rgb(244 244 245);
+  --theme-tab-hover-bg: rgb(250 250 250);
+  --theme-rail-item-active-border-r: none;
+  --theme-rail-item-inactive-border-r: none;
+  --theme-divider: 1px solid rgb(228 228 231);
+}
+
+* {
+  font-variant-ligatures: contextual;
+  font-family: "JetBrains Mono Variable", monospace;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(161 161 170 / 0.4) transparent;
+}
+
+.dark * {
+  scrollbar-color: rgb(82 82 91 / 0.5) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgb(161 161 170 / 0.35);
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgb(161 161 170 / 0.55);
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background: rgb(82 82 91 / 0.5);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background: rgb(82 82 91 / 0.7);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+body {
+  /* Explicit values — avoids @apply layer ordering issues with multiple CSS files */
+  background-color: rgb(250 250 250); /* zinc-50 */
+  color: rgb(24 24 27);               /* zinc-900 */
+}
+
+.dark body {
+  background-color: rgb(9 9 11);  /* zinc-950 */
+  color: rgb(244 244 245);        /* zinc-100 */
+}
+
+.dark {
+  --theme-shadow-elevated: none;
+  --theme-shadow-hover: none;
+  --theme-list-active-bg: rgb(39 39 42);
+  --theme-list-hover-bg: rgb(30 30 33);
+  --theme-tab-active-bg: rgb(39 39 42);
+  --theme-tab-hover-bg: rgb(30 30 33);
+  --theme-divider: 1px solid rgb(39 39 42);
+  --color-selection-bg: rgb(59 130 246 / 0.5);
+  --color-selection-fg: rgb(239 246 255);
+}
+
+@view-transition {
+  navigation: auto;
+}
+
+::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}
+
+::-moz-selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-fg);
+}
+
+/* SSR island wrappers should not break flex layout */
+solid-client,
+solid-island {
+  display: contents;
+}

package/src/styles/input.css

@@ -0,0 +1,54 @@
+/* Global Button Styling */
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+button[disabled],
+[role="button"][disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+/* Global Checkbox Styling */
+input[type="checkbox"] {
+  @apply appearance-none w-4 h-4 bg-white dark:bg-black border border-zinc-300 dark:border-zinc-700 cursor-pointer transition-all duration-200 inline-flex items-center justify-center m-0 align-middle rounded;
+}
+
+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;
+}
+
+input[type="checkbox"]:checked::before {
+  @apply text-white;
+}
+
+input[type="checkbox"]:hover {
+  @apply scale-105;
+}
+
+input[type="checkbox"]:focus {
+  @apply outline-none;
+}
+
+input[type="checkbox"]:focus-visible {
+  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-zinc-900;
+}
+
+input[type="checkbox"]:disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+input[type="checkbox"]:disabled:hover {
+  @apply scale-100;
+}

package/src/styles/tokens.css

@@ -0,0 +1,35 @@
+/* Theme tokens and core text utilities */
+@utility slider-track-colors {
+  --slider-fill: rgb(59 130 246);
+  --slider-track: rgb(228 228 231);
+}
+
+.dark .slider-track-colors,
+.dark.slider-track-colors {
+  --slider-fill: rgb(96 165 250);
+  --slider-track: rgb(63 63 70);
+}
+
+@utility text-primary {
+  @apply text-zinc-900 dark:text-zinc-100;
+}
+
+@utility text-secondary {
+  @apply text-zinc-700 dark:text-zinc-300;
+}
+
+@utility text-dimmed {
+  @apply text-zinc-500 dark:text-zinc-500;
+}
+
+@utility text-label {
+  @apply text-sm font-medium text-zinc-700 dark:text-zinc-300;
+}
+
+@utility hover-text {
+  @apply text-zinc-400 hover:text-zinc-700 dark:text-zinc-600 dark:hover:text-zinc-300;
+}
+
+@utility bg-dark {
+  @apply bg-[var(--color-dark)];
+}

package/src/styles/utilities-buttons.css

@@ -0,0 +1,125 @@
+/* Button and input utility classes — flat, solid */
+@utility btn-base {
+  @apply inline-flex cursor-pointer items-center justify-center gap-1.5 select-none rounded-md font-medium border;
+  @apply transition-[background-color,color,border-color,opacity] duration-150 ease-out;
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+}
+
+@utility btn-sm {
+  min-height: calc((var(--theme-input-py) * 2) + 1.25rem);
+  padding: var(--theme-input-py) 0.75rem;
+  @apply text-xs;
+}
+
+@utility btn-md {
+  min-height: calc((var(--theme-input-py) * 2) + 1.25rem + 0.55rem);
+  @apply px-4 py-2 text-sm;
+}
+
+/* Simple: ghost — no bg, no border, text only, bg on hover */
+@utility btn-simple {
+  @apply btn-base bg-transparent text-zinc-600 border-transparent;
+  @apply hover:bg-zinc-100 hover:text-zinc-800;
+  @apply active:bg-zinc-200;
+  @apply dark:text-zinc-400 dark:border-transparent;
+  @apply dark:hover:bg-zinc-800 dark:hover:text-zinc-200;
+  @apply dark:active:bg-zinc-700;
+}
+
+/* Primary: outlined blue, fills on hover */
+@utility btn-primary {
+  @apply btn-base bg-white text-blue-600 border-blue-400;
+  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500;
+  @apply active:bg-blue-600 active:border-blue-600;
+  @apply dark:bg-transparent dark:text-blue-400 dark:border-blue-400;
+  @apply dark:hover:bg-blue-500 dark:hover:text-white dark:hover:border-blue-500;
+  @apply dark:active:bg-blue-600;
+}
+
+/* Secondary: flat zinc, no border */
+@utility btn-secondary {
+  @apply btn-base bg-zinc-100 text-zinc-700 border-transparent;
+  @apply hover:bg-zinc-200;
+  @apply active:bg-zinc-300;
+  @apply dark:bg-zinc-800 dark:text-zinc-200 dark:border-transparent;
+  @apply dark:hover:bg-zinc-700;
+  @apply dark:active:bg-zinc-600;
+}
+
+/* Success: outlined green, fills on hover */
+@utility btn-success {
+  @apply btn-base bg-white text-emerald-600 border-emerald-400;
+  @apply hover:bg-emerald-500 hover:text-white hover:border-emerald-500;
+  @apply active:bg-emerald-600 active:border-emerald-600;
+  @apply dark:bg-transparent dark:text-emerald-400 dark:border-emerald-400;
+  @apply dark:hover:bg-emerald-500 dark:hover:text-white dark:hover:border-emerald-500;
+  @apply dark:active:bg-emerald-600;
+}
+
+/* Danger: outlined red, fills on hover */
+@utility btn-danger {
+  @apply btn-base bg-white text-red-600 border-red-400;
+  @apply hover:bg-red-500 hover:text-white hover:border-red-500;
+  @apply active:bg-red-600 active:border-red-600;
+  @apply dark:bg-transparent dark:text-red-400 dark:border-red-400;
+  @apply dark:hover:bg-red-500 dark:hover:text-white dark:hover:border-red-500;
+  @apply dark:active:bg-red-600;
+}
+
+@utility btn-input {
+  @apply inline-flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium leading-5 select-none cursor-pointer;
+  @apply transition-[background-color,color,border-color] duration-150 border;
+  @apply bg-zinc-100 text-zinc-600 border-zinc-100;
+  @apply hover:bg-zinc-200/70 hover:text-zinc-800 hover:border-zinc-200/70;
+  @apply active:bg-zinc-200;
+  @apply focus-visible:outline-none focus-visible:bg-white focus-visible:border-blue-400;
+  @apply dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100 dark:hover:border-zinc-700;
+  @apply dark:active:bg-zinc-700;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-blue-400;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+}
+
+@utility btn-input-sm {
+  min-height: calc((var(--theme-input-py) * 2) + 1.25rem);
+  padding: var(--theme-input-py) 0.75rem;
+  @apply text-xs;
+}
+
+@utility btn-input-md {
+  @apply min-h-9 px-3 py-1.5 text-sm;
+}
+
+@utility btn-input-active {
+  @apply bg-blue-50 text-blue-600 border-blue-200;
+  @apply hover:bg-blue-100 hover:border-blue-200;
+  @apply dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
+  @apply dark:hover:bg-blue-900 dark:hover:border-blue-700;
+}
+
+/* Input: grey bg + matching border unfocused, white bg + blue border on focus */
+@utility input {
+  padding: var(--theme-input-py) var(--theme-input-px);
+  @apply rounded-md border text-sm leading-5 focus-visible:outline-none;
+  @apply bg-zinc-100 text-zinc-800 border-zinc-100;
+  @apply hover:bg-zinc-200/70 hover:border-zinc-200/70;
+  @apply focus:!bg-white focus:!border-blue-400 focus-within:!bg-white focus-within:!border-blue-400;
+  @apply dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:border-zinc-700;
+  @apply dark:focus:!bg-zinc-900 dark:focus:!border-blue-400 dark:focus-within:!bg-zinc-900 dark:focus-within:!border-blue-400;
+  @apply disabled:bg-zinc-50 disabled:text-zinc-400 disabled:border-zinc-50 disabled:cursor-not-allowed;
+  @apply dark:disabled:bg-zinc-900 dark:disabled:text-zinc-500 dark:disabled:border-zinc-900;
+}
+
+@utility icon-btn {
+  @apply inline-flex h-8 w-8 items-center justify-center p-1 rounded-md;
+  @apply text-zinc-400 dark:text-zinc-500;
+  @apply transition-[color,background-color] duration-150 ease-out;
+  @apply bg-transparent border-0 shadow-none;
+  @apply hover:text-zinc-700 hover:bg-zinc-100;
+  @apply dark:hover:text-zinc-200 dark:hover:bg-zinc-800;
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950;
+  @apply active:bg-zinc-200 dark:active:bg-zinc-700;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+}

package/src/styles/utilities-feedback.css

@@ -0,0 +1,65 @@
+/* Feedback blocks, badges, and chips — flat, solid, border-based */
+@utility info-block {
+  @apply rounded-lg border px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap;
+}
+
+@utility info-block-note {
+  @apply info-block bg-zinc-50 border-zinc-200 text-zinc-700 dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-300;
+}
+
+@utility info-block-info {
+  @apply info-block bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-300;
+}
+
+@utility info-block-success {
+  @apply info-block bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-300;
+}
+
+@utility info-block-warning {
+  @apply info-block bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-950 dark:border-amber-800 dark:text-amber-300;
+}
+
+@utility info-block-danger {
+  @apply info-block bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-300;
+}
+
+@utility status-dot {
+  @apply w-2 h-2 rounded-full shrink-0;
+}
+
+@utility badge {
+  @apply rounded inline-flex items-center gap-1 px-1.5 py-0.5 text-xs;
+}
+
+@utility chip {
+  @apply rounded-lg inline-flex items-center gap-1.5 text-xs transition-colors cursor-pointer px-2 py-1;
+  @apply border border-zinc-200 dark:border-zinc-700;
+}
+
+@utility thumbnail {
+  @apply rounded-lg overflow-hidden;
+}
+
+@utility popup {
+  @apply rounded-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-lg text-zinc-900 dark:text-zinc-100;
+}
+
+@utility tag {
+  @apply rounded inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium;
+}
+
+/* Stat cards — markup-only convention, see
+   `skills/cloud-app/references/frontend.md` § Stats and the live demos in
+   `packages/ui-lab/src/frontend/UiLabShowcase.island.tsx`. Pattern:
+     <div class="paper overflow-hidden">
+       <div class="grid grid-cols-N gap-px p-px bg-zinc-100 dark:bg-zinc-800">
+         <div class="bg-white dark:bg-zinc-900 px-4 py-4 flex flex-col gap-0.5">
+           <span class="text-[10px] uppercase tracking-wider text-dimmed">Label</span>
+           <span class="text-xl font-bold tabular-nums text-primary">Value</span>
+           <span class="text-[10px] text-dimmed">Sub</span>
+         </div>
+       </div>
+     </div>
+   The earlier `.stat-grid / .stat-cell / .stat-value / .stat-label / .stat-sub`
+   utilities used `divide-x` + centered cells — DO NOT reintroduce. They
+   produced double borders at corners and missing borders on edges. */

package/src/styles/utilities-layout.css

@@ -0,0 +1,122 @@
+/* Layout, containers, dividers, and prose styles — flat, solid surfaces */
+@utility section {
+  @apply py-5;
+}
+
+@utility article {
+  @apply mx-auto max-w-[65ch] px-2 py-4 pb-10 transition-[max-width] duration-500 ease-in-out md:px-4 lg:max-w-[80ch] [&_img]:mx-auto [&_img]:max-h-[50vh] [&_img]:w-auto;
+
+  & img {
+    @apply rounded-lg;
+  }
+}
+
+@utility container {
+  @apply mx-auto max-w-480 px-4;
+}
+
+@utility paper {
+  @apply rounded-lg transition-colors duration-150;
+  @apply bg-white border border-zinc-100;
+  @apply dark:bg-zinc-900 dark:border-zinc-800;
+}
+
+@utility dialog-panel {
+  @apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+  @apply w-full max-w-md max-h-[90vh] p-4 overflow-x-hidden overflow-y-auto;
+  @apply backdrop:bg-black/40;
+  @apply rounded-lg bg-white dark:bg-zinc-900;
+  @apply border border-zinc-200 dark:border-zinc-800;
+  @apply shadow-lg;
+}
+
+@utility paper-highlighted {
+  @apply paper border-zinc-300 dark:border-zinc-700;
+}
+
+@utility no-scrollbar {
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@utility ellipsis {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+@utility divider {
+  border: none;
+  border-bottom: var(--theme-divider);
+  @apply hidden;
+}
+
+@utility divider-v {
+  border: none;
+  border-right: var(--theme-divider);
+}
+
+@utility app-cols {
+  @apply flex flex-col gap-2 lg:flex-row lg:items-stretch lg:gap-2;
+}
+
+@utility app-rows {
+  @apply flex flex-col gap-3;
+}
+
+@utility app-divider {
+  & > * + * {
+    border-top: var(--theme-divider);
+  }
+}
+
+.prose {
+  @apply text-zinc-900 dark:text-zinc-100;
+
+  h1 {
+    @apply text-3xl font-bold mb-4 mt-8 first:mt-0 text-zinc-900 dark:text-zinc-100;
+  }
+
+  h2 {
+    @apply text-2xl font-bold mb-3 mt-6 text-zinc-900 dark:text-zinc-100;
+  }
+
+  h3 {
+    @apply text-xl font-semibold mb-2 mt-4 text-zinc-900 dark:text-zinc-100;
+  }
+
+  p {
+    @apply mb-4 leading-7;
+  }
+
+  ul,
+  ol {
+    @apply mb-4 ml-6 space-y-2;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  li {
+    @apply leading-7;
+  }
+
+  a {
+    @apply text-blue-600 hover:text-blue-700 underline dark:text-blue-400 dark:hover:text-blue-300;
+  }
+
+  strong {
+    @apply font-semibold text-zinc-900 dark:text-zinc-100;
+  }
+
+  hr {
+    @apply my-8 border-zinc-200 dark:border-zinc-800;
+  }
+}