@jant/core 0.3.35 → 0.3.37

package/src/styles/components.css

@@ -5,6 +5,20 @@
  * AFTER Tailwind is initialized in the user's CSS entry.
  */
 
+/* Search result highlight */
+mark {
+  background-color: var(--search-mark-bg);
+  color: var(--search-mark-color);
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.search-snippet {
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading);
+}
+
 /* Icon stroke width — CSS property overrides SVG presentational attributes */
 svg[stroke-width] {
   stroke-width: var(--icon-stroke);
@@ -23,22 +37,22 @@ 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 */
 @layer components {
   .toast-container {
-    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none;
+    @apply fixed flex flex-col gap-2 pointer-events-none;
+    /* Override browser popover defaults for both idle and open states */
+    @apply inset-auto border-none bg-transparent p-0 m-0 overflow-visible;
+    top: 1rem;
+    right: 1rem;
+
+    &:popover-open {
+      @apply inset-auto border-none bg-transparent p-0 m-0 overflow-visible;
+      top: 1rem;
+      right: 1rem;
+    }
   }
 
   .toast {
@@ -64,6 +78,17 @@ svg[stroke-width].icon-fine {
     color: var(--color-destructive);
   }
 
+  .toast-action {
+    @apply shrink-0 text-xs font-medium no-underline;
+    color: var(--color-foreground);
+    opacity: 0.7;
+    transition: opacity 0.15s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .toast-close {
     @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
     color: var(--color-muted-foreground);
@@ -102,7 +127,7 @@ svg[stroke-width].icon-fine {
   }
 }
 
-/* Dashboard header */
+/* Admin header */
 @layer components {
   .dash-header {
     padding: 20px 0 0;
@@ -121,29 +146,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: var(--fw-semibold);
+    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 +198,41 @@ svg[stroke-width].icon-fine {
     }
   }
 
-  .dash-header-link {
-    position: relative;
+  .dash-header-link-active {
+    color: var(--color-foreground);
+    font-weight: var(--fw-medium);
+  }
+
+  .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 +252,210 @@ 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: var(--fw-medium);
+  }
+}
+
+/* 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;
+  }
+
+  .settings-export-form {
+    display: contents;
+  }
+
+  button.settings-item {
+    @apply w-full text-left cursor-pointer;
+    background: none;
+    border: none;
+    font: inherit;
+    border-bottom: 1px solid var(--color-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+/* Admin scoped font rules */
+@layer components {
+  .dash-heading {
+    font-family: var(--font-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

@@ -7,22 +7,39 @@
  */
 
 :root {
-  /* Typography */
-  --font-body: system-ui, sans-serif;
+  /* Typography — Font families */
+  --font-body:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
   --font-heading: var(--font-body);
-  --font-mono: ui-monospace, monospace;
+  --font-serif:
+    ui-serif, "New York Small", "New York", "Iowan Old Style", Charter, Georgia,
+    "Times New Roman", Times, "Songti SC", "Noto Serif CJK SC", "STSong",
+    "SimSun", serif;
+  --font-mono:
+    ui-monospace, Menlo, Monaco, Consolas, "Cascadia Code", "Courier New",
+    monospace;
+
+  /* Typography — Font weights */
+  --fw-light: 300;
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fw-extrabold: 800;
   --text-sm: 0.8125rem;
   --text-base: 0.9375rem;
   --text-lg: 1.0625rem;
   --leading: 1.5;
 
   /* Layout */
-  --site-width: 600px;
+  --site-width: 500px;
   --site-padding: 1.5rem;
   --content-gap: 1rem;
   --space-xl: 2rem;
 
-  /* Sidebar layout (dashboard + site sidebar pages) */
+  /* Sidebar layout (admin + site sidebar pages) */
   --sidebar-width: 12rem;
   --sidebar-gap: 2rem;
 
@@ -43,7 +60,14 @@
   --icon-stroke-fine: 1.5;
 
   /* Derived color tokens (from BaseCoat variables) */
+  --site-accent: var(--primary);
+  --site-accent-text: var(--primary-foreground);
   --site-column-outline: var(--border);
+  --site-border-light: color-mix(
+    in srgb,
+    var(--site-column-outline) 52%,
+    transparent
+  );
   --site-threadline: var(--border);
   --site-page-bg: var(--background);
   --site-elevated-bg: var(--background);
@@ -53,4 +77,68 @@
   --site-text-placeholder: oklch(from var(--muted-foreground) l c h / 0.5);
   --site-media-outline: var(--border);
   --site-divider: var(--border);
+  --site-feed-card-bg: color-mix(
+    in srgb,
+    var(--site-elevated-bg) 88%,
+    var(--site-nav-hover-bg)
+  );
+  --site-feed-card-border: color-mix(
+    in srgb,
+    var(--site-divider) 78%,
+    transparent
+  );
+  --site-feed-card-shadow: color-mix(
+    in srgb,
+    var(--site-text-primary) 12%,
+    transparent
+  );
+  --site-feed-divider-color: color-mix(
+    in srgb,
+    var(--site-text-secondary) 30%,
+    transparent
+  );
+  --site-feed-link-tint: color-mix(in srgb, var(--site-accent) 7%, transparent);
+  --site-feed-quote-tint: color-mix(
+    in srgb,
+    var(--site-accent) 10%,
+    transparent
+  );
+  --site-thread-context-bg: color-mix(
+    in srgb,
+    var(--site-nav-hover-bg) 58%,
+    transparent
+  );
+  --site-thread-context-border: color-mix(
+    in srgb,
+    var(--site-divider) 74%,
+    transparent
+  );
+  --site-thread-gap-bg: color-mix(
+    in srgb,
+    var(--site-nav-hover-bg) 42%,
+    transparent
+  );
+  --site-thread-item-spacing: 14px;
+  --site-thread-context-max-height: 188px;
+  --site-thread-dot-ring: color-mix(
+    in srgb,
+    var(--site-accent) 16%,
+    transparent
+  );
+
+  /* Search highlight */
+  --search-mark-bg: oklch(0.92 0.14 90 / 0.55);
+  --search-mark-color: oklch(0.35 0.09 70);
+
+  /* Admin */
+  --dash-bg: oklch(0.97 0.005 80);
+  --dash-card-radius: 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --search-mark-bg: oklch(0.45 0.1 85 / 0.5);
+    --search-mark-color: oklch(0.92 0.08 90);
+    --dash-bg: oklch(0.2 0.005 80);
+  }
 }