@jant/core 0.3.34 → 0.3.36

package/src/styles/components.css

@@ -23,16 +23,6 @@ svg[stroke-width].icon-fine {
     padding-left: var(--site-padding);
     padding-right: var(--site-padding);
   }
-
-  .container-sidebar {
-    max-width: calc(
-      var(--sidebar-width) + var(--sidebar-gap) + var(--site-width)
-    );
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: var(--site-padding);
-    padding-right: var(--site-padding);
-  }
 }
 
 /* Toast notifications */
@@ -121,29 +111,50 @@ svg[stroke-width].icon-fine {
     padding-bottom: 12px;
   }
 
-  .dash-header-left {
+  .dash-header-avatar-link {
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  .dash-header-avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: 5px;
+  }
+
+  .dash-header-avatar:is(img) {
+    object-fit: cover;
+  }
+
+  .dash-header-avatar-fallback {
     display: flex;
     align-items: center;
-    gap: 6px;
+    justify-content: center;
+    color: white;
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
   }
 
   .dash-header-nav {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 4px;
-    flex: 1;
+    gap: 16px;
   }
 
-  .dash-header-logo {
-    font-size: 1.125rem;
-    font-weight: 800;
-    line-height: 1;
-    color: var(--color-foreground);
+  .dash-header-nav-sep {
+    display: none;
   }
 
-  .dash-header-site-link {
-    @apply flex items-center justify-center;
+  .dash-header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  .dash-header-link {
+    font-size: 0.8125rem;
     color: var(--color-muted-foreground);
     transition: color 0.15s;
 
@@ -152,33 +163,41 @@ svg[stroke-width].icon-fine {
     }
   }
 
-  .dash-header-link {
-    position: relative;
+  .dash-header-link-active {
+    color: var(--color-foreground);
+    font-weight: 500;
+  }
+
+  .dash-header-visit {
+    @apply flex items-center gap-3;
     font-size: 0.875rem;
-    padding: 6px 10px;
-    border-radius: var(--radius);
     color: var(--color-muted-foreground);
-    transition:
-      color 0.15s,
-      background-color 0.15s;
+    transition: color 0.15s;
 
     &:hover {
       color: var(--color-foreground);
-      background-color: var(--color-accent);
     }
   }
 
-  .dash-header-link-active {
-    color: var(--color-foreground);
-    font-weight: 600;
-    background-color: var(--color-accent);
+  .dash-header-visit-text {
+    display: none;
+  }
+
+  @media (min-width: 700px) {
+    .dash-header-visit-text {
+      display: inline;
+    }
+
+    .dash-header-visit-icon {
+      display: none;
+    }
   }
 
   .dash-header-menu-btn {
     @apply flex items-center justify-center;
     width: 32px;
     height: 32px;
-    border-radius: 999px;
+    border-radius: var(--radius);
     border: none;
     background: transparent;
     color: var(--color-muted-foreground);
@@ -198,33 +217,194 @@ svg[stroke-width].icon-fine {
   }
 }
 
-/* Sub-navigation — underline style for secondary tabs (Settings, Appearance) */
+/* Breadcrumb — second row below header on settings sub-pages */
+@layer components {
+  .dash-breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    font-size: 0.8125rem;
+  }
+
+  .dash-breadcrumb-parent {
+    color: var(--color-muted-foreground);
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--color-foreground);
+    }
+  }
+
+  .dash-breadcrumb-sep {
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+  }
+
+  .dash-breadcrumb-current {
+    color: var(--color-foreground);
+    font-weight: 500;
+  }
+}
+
+/* Settings root — iOS-style grouped list */
 @layer components {
-  .dash-subnav {
-    @apply flex gap-4 mb-6;
-
-    > a {
-      position: relative;
-      font-size: 0.8125rem;
-      padding-bottom: 8px;
-      color: var(--color-muted-foreground);
-      transition: color 0.15s;
-
-      &:hover {
-        color: var(--color-foreground);
-      }
-
-      &.active {
-        color: var(--color-foreground);
-        font-weight: 500;
-
-        &::after {
-          content: "";
-          @apply absolute inset-x-0 bottom-0 h-0.5 rounded-full;
-          background-color: var(--color-foreground);
-        }
-      }
+  .settings-root {
+    @apply flex flex-col gap-6;
+  }
+
+  .settings-group-label {
+    @apply text-xs font-medium uppercase tracking-wider mb-2 px-1;
+    color: var(--color-muted-foreground);
+  }
+
+  .settings-group {
+    @apply border rounded-xl overflow-hidden;
+    border-radius: var(--dash-card-radius);
+  }
+
+  .settings-item {
+    @apply flex items-center gap-3 px-4 py-3;
+    transition: background-color 0.15s;
+    border-bottom: 1px solid var(--color-border);
+
+    &:last-child {
+      border-bottom: none;
     }
+
+    &:hover {
+      background-color: var(--color-accent);
+    }
+  }
+
+  .settings-item-icon {
+    @apply flex items-center justify-center shrink-0;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    color: white;
+  }
+
+  .settings-item-text {
+    @apply flex flex-col flex-1 min-w-0;
+  }
+
+  .settings-item-name {
+    @apply text-sm font-medium;
+    color: var(--color-foreground);
+  }
+
+  .settings-item-desc {
+    @apply text-xs;
+    color: var(--color-muted-foreground);
+  }
+
+  .settings-item-chevron {
+    @apply shrink-0;
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+  }
+}
+
+/* Dashboard scoped font rules */
+@layer components {
+  .dash-heading {
+    font-family: Georgia, "Times New Roman", serif;
+  }
+}
+
+/* Navigation preview — browser-chrome frame for nav preview */
+@layer components {
+  .nav-preview {
+    @apply border rounded-lg overflow-hidden;
+    background-color: var(--color-card);
+  }
+
+  .nav-preview-chrome {
+    @apply flex items-center gap-3 px-4 py-2.5 border-b;
+    background-color: var(--color-muted);
+  }
+
+  .nav-preview-dots {
+    @apply flex gap-1.5;
+
+    > span {
+      @apply block size-2.5 rounded-full;
+      background-color: var(--color-muted-foreground);
+      opacity: 0.3;
+    }
+  }
+
+  .nav-preview-label {
+    @apply text-xs;
+    color: var(--color-muted-foreground);
+  }
+
+  .nav-preview-content {
+    @apply px-5 py-3;
+  }
+}
+
+/* Navigation items list — card-style draggable nav items */
+@layer components {
+  .nav-items-list {
+    @apply flex flex-col gap-2;
+  }
+
+  .nav-item {
+    @apply border rounded-lg transition-shadow;
+
+    &:hover {
+      @apply shadow-xs;
+    }
+  }
+
+  .nav-item-editing {
+    @apply ring-1 ring-ring;
+  }
+
+  .nav-item-row {
+    @apply flex items-center gap-1 px-1 py-1;
+  }
+
+  .nav-item-handle {
+    @apply flex items-center justify-center w-8 h-8 shrink-0 cursor-grab rounded;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--color-accent);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .nav-item-info {
+    @apply flex flex-col flex-1 min-w-0 py-1.5 px-1.5 rounded cursor-pointer;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--color-accent);
+    }
+  }
+
+  .nav-item-toggle {
+    @apply flex items-center justify-center w-8 h-8 shrink-0 rounded border-0 bg-transparent cursor-pointer;
+    color: var(--color-muted-foreground);
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+
+    &:hover {
+      color: var(--color-foreground);
+      background-color: var(--color-accent);
+    }
+  }
+
+  .nav-item-edit {
+    @apply flex flex-col gap-3 px-4 pb-3 pt-3 border-t mx-1 mb-1;
+    border-color: var(--color-border);
   }
 }
 

package/src/styles/tokens.css

@@ -53,4 +53,14 @@
   --site-text-placeholder: oklch(from var(--muted-foreground) l c h / 0.5);
   --site-media-outline: var(--border);
   --site-divider: var(--border);
+
+  /* Dashboard */
+  --dash-bg: oklch(0.97 0.005 80);
+  --dash-card-radius: 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dash-bg: oklch(0.2 0.005 80);
+  }
 }