slexkit 0.2.0 → 0.3.0

package/dist/components/tabs.css

@@ -1,43 +1,43 @@
-.slex-tabs {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.slex-tabs[data-orientation="vertical"] {
-  flex-direction: row;
-}
-
+.slex-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.slex-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
 .slex-tabs-list {
   --slex-tabs-indicator-inline-inset: 12px;
   --slex-tabs-indicator-block-inset: 8px;
   position: relative;
   display: flex;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: hidden;
-  border-bottom: 1px solid var(--border);
-}
-
-.slexkit-root .slex-tabs-list {
-  display: flex;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.slexkit-root .slex-tabs-list li {
-  margin: 0;
-  padding: 0;
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  list-style: none;
-}
-
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+
+.slexkit-root .slex-tabs-list {
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.slexkit-root .slex-tabs-list li {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  list-style: none;
+}
+
 .slex-tabs-selected-indicator {
   position: absolute;
   z-index: 20;
@@ -63,25 +63,25 @@
 .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
   flex-direction: column;
   border-right: 1px solid var(--border);
-  border-bottom: none;
-}
-
-.slex-tabs-trigger {
-  position: relative;
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: var(--muted-foreground);
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
+  border-bottom: none;
+}
+
+.slex-tabs-trigger {
+  position: relative;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
 }
-
+
 .slex-tabs-trigger--icon {
   display: inline-grid;
   width: var(--slex-control-height, 2.25rem);
@@ -123,17 +123,17 @@
 .slex-tabs-trigger.slex-tabs-trigger--selected:hover:not([data-disabled]) {
   color: var(--primary);
 }
-
-.slex-tabs-trigger[data-disabled] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.slex-tabs-trigger:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: -2px;
-}
-
+
+.slex-tabs-trigger[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.slex-tabs-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
 .slex-tabs-content {
   margin-top: 0.75rem !important;
   border-radius: 0 !important;
@@ -155,38 +155,38 @@
 }
 
 @keyframes slex-tabs-content-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.slex-tabs-content[hidden] {
-  display: none;
-}
-
-@media (max-width: 640px) {
-  .slex-tabs-list {
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .slex-tabs-list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .slex-tabs[data-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
-    flex-direction: row;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slex-tabs-content[hidden] {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .slex-tabs-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .slex-tabs-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .slex-tabs[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
+    flex-direction: row;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
 }

package/dist/components/tabs.js

@@ -1,11 +1,11 @@
 import {
   Tabs
-} from "../chunks/accordion-cfjyxw93.js";
-import"../chunks/accordion-hzyrngd6.js";
-import"../chunks/accordion-cw5r75jm.js";
+} from "../chunks/button-53ccjq5p.js";
+import"../chunks/button-faf563xf.js";
+import"../chunks/button-xv2dz7vn.js";
 import {
   createSvelteRenderer
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/entries/tabs.ts
 import { register } from "../runtime.js";

package/dist/components/text-input.css

@@ -25,10 +25,13 @@
 }
 
 .slex-input-control {
+  position: relative;
   display: flex;
   align-items: stretch;
   width: 100%;
   min-width: 0;
+  border-radius: var(--radius);
+  transition: box-shadow 150ms ease;
 }
 
 .slex-input {
@@ -82,11 +85,11 @@
 .slex-input-controls {
   box-sizing: border-box;
   display: inline-grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
   align-items: stretch;
   flex: 0 0 auto;
-  width: 3.75rem;
-  min-width: 3.75rem;
+  width: 1.875rem;
+  min-width: 1.875rem;
   min-height: 2.5625rem;
   overflow: hidden;
   border: 1px solid var(--input);
@@ -103,15 +106,15 @@
   justify-content: center;
   width: 100%;
   min-width: 0;
-  min-height: 100%;
+  min-height: 0;
   padding: 0;
   border: 0;
-  border-left: 1px solid var(--input);
+  border-top: 1px solid var(--input);
   border-radius: 0;
   background: transparent;
   color: var(--foreground);
   font: inherit;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
@@ -119,7 +122,7 @@
 }
 
 .slex-input-step:first-child {
-  border-left: 0;
+  border-top: 0;
 }
 
 .slex-input-step:last-child {
@@ -132,9 +135,9 @@
 
 .slex-input-step:focus-visible {
   z-index: 1;
-  border-color: var(--ring);
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+  background: color-mix(in oklab, var(--muted) 58%, var(--background));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 34%, transparent);
 }
 
 .slex-input-step:disabled {
@@ -148,7 +151,7 @@
 
 .slex-input:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+  box-shadow: none;
 }
 
 .slex-input[type="number"] {
@@ -172,21 +175,21 @@
 
 .slex-input-field[data-invalid="true"] .slex-input:focus {
   border-color: var(--destructive);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--ring);
+.slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input-step {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit,
+.slex-input-control:focus-within .slex-input-controls {
   border-color: var(--ring);
 }
 
-.slex-input-control:focus-within .slex-input-controls {
+.slex-input-control:focus-within .slex-input-step {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
 .slex-input-field[data-invalid="true"] .slex-input-unit {
@@ -202,20 +205,17 @@
   border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--destructive);
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit,
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls,
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
   border-color: var(--destructive);
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls {
-  border-color: var(--destructive);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
-}
-
 .slex-input[disabled] {
   opacity: 0.5;
   cursor: not-allowed;

package/dist/components/text.js

@@ -16,7 +16,7 @@ import {
   template_effect,
   text1 as text,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/entries/text.ts
 import { register } from "../runtime.js";

package/dist/components/toast.js

@@ -1,10 +1,10 @@
 import {
   Toast
-} from "../chunks/accordion-ehnhpeca.js";
-import"../chunks/accordion-hzyrngd6.js";
+} from "../chunks/button-jxv4c65t.js";
+import"../chunks/button-faf563xf.js";
 import {
   InlineIcon
-} from "../chunks/accordion-cw5r75jm.js";
+} from "../chunks/button-xv2dz7vn.js";
 import {
   append,
   bindPropStore,
@@ -31,7 +31,7 @@ import {
   text1 as text,
   user_derived,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/entries/toast.ts
 import { register } from "../runtime.js";

package/dist/components/tooling.js

@@ -1,14 +1,14 @@
 import {
   Tabs
-} from "../chunks/accordion-cfjyxw93.js";
+} from "../chunks/button-53ccjq5p.js";
+import"../chunks/button-faf563xf.js";
 import {
   Select
-} from "../chunks/accordion-5f0nvjjm.js";
+} from "../chunks/button-dsftwzvg.js";
 import {
   Button
-} from "../chunks/accordion-830dw78f.js";
-import"../chunks/accordion-hzyrngd6.js";
-import"../chunks/accordion-cw5r75jm.js";
+} from "../chunks/button-z5yv24ks.js";
+import"../chunks/button-xv2dz7vn.js";
 import {
   action,
   append,
@@ -62,7 +62,7 @@ import {
   unmount,
   user_derived,
   user_effect
-} from "../chunks/accordion-nw12ytps.js";
+} from "../chunks/button-cr1fhsa7.js";
 
 // src/components/tooling.ts
 import { register } from "../runtime.js";
@@ -48112,11 +48112,72 @@ function PlaygroundSlexCode($$anchor, $$props) {
 }
 
 // src/components/svelte/tooling/PlaygroundMarkdown.svelte
-var root101 = from_html(`<div class="slex-doc-streamdown"><!></div>`);
+var root101 = from_html(`<div class="slex-doc-prose slex-doc-streamdown"><!></div>`);
 function PlaygroundMarkdown($$anchor, $$props) {
   push($$props, true);
   const extensions = [markedKatex({ singleDollarInline: true })];
   const renderers = { inlineKatex: KatexRenderer, blockKatex: KatexRenderer };
+  const options = { headerIds: false };
+  function stripFrontmatter(value) {
+    const raw = String(value ?? "").replace(/^\uFEFF/, "").replace(/\r\n/g, `
+`);
+    if (!raw.startsWith("---"))
+      return raw;
+    const end = raw.indexOf(`
+---`, 3);
+    if (end === -1)
+      return raw;
+    const closeEnd = raw.indexOf(`
+`, end + 1);
+    return raw.slice(closeEnd === -1 ? raw.length : closeEnd + 1).trimStart();
+  }
+  function escapeHtml(value) {
+    return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function stripInlineMarkdown(value) {
+    return String(value).replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "").replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/<[^>]+>/g, "").replace(/\s+#+\s*$/, "").trim();
+  }
+  function slugText(value) {
+    const slug2 = String(value).toLowerCase().replace(/[`"'\u2018\u2019\u201c\u201d]/g, "").replace(/[^a-z0-9\u4e00-\u9fa5]+/g, "-").replace(/^-+|-+$/g, "");
+    return slug2 || "section";
+  }
+  function createHeadingIdGenerator() {
+    const counts = new Map;
+    return (rawTitle) => {
+      const explicit = rawTitle.match(/\s+\{#([A-Za-z0-9_-]+)\}\s*$/)?.[1] ?? "";
+      const base2 = explicit || slugText(stripInlineMarkdown(rawTitle));
+      const count2 = counts.get(base2) ?? 0;
+      counts.set(base2, count2 + 1);
+      return count2 ? `${base2}-${count2 + 1}` : base2;
+    };
+  }
+  function normalizeHeadingAnchors(markdown2) {
+    const nextId = createHeadingIdGenerator();
+    let fence = null;
+    return String(markdown2 ?? "").split(/\n/).map((line) => {
+      const marker = String(line).match(/^[ \t]{0,3}(`{3,}|~{3,})/);
+      if (fence) {
+        if (marker && marker[1][0] === fence.char && marker[1].length >= fence.length)
+          fence = null;
+        return line;
+      }
+      if (marker) {
+        fence = { char: marker[1][0], length: marker[1].length };
+        return line;
+      }
+      const heading2 = String(line).match(/^(#{1,6})[ \t]+(.+)$/);
+      if (!heading2)
+        return line;
+      const rawTitle = heading2[2].replace(/\s+#+\s*$/, "");
+      const renderedTitle = rawTitle.replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "").trim();
+      return `<span id="${escapeHtml(nextId(rawTitle))}" class="slex-doc-heading-anchor"></span>
+${heading2[1]} ${renderedTitle}`;
+    }).join(`
+`);
+  }
+  function previewMarkdown(value) {
+    return normalizeHeadingAnchors(stripFrontmatter(value));
+  }
   var div = root101();
   var node = child(div);
   {
@@ -48135,9 +48196,10 @@ function PlaygroundMarkdown($$anchor, $$props) {
         }
       });
     };
+    let $0 = user_derived(() => previewMarkdown($$props.content));
     dist_default(node, {
       get source() {
-        return $$props.content;
+        return get($0);
       },
       get extensions() {
         return extensions;
@@ -48145,6 +48207,9 @@ function PlaygroundMarkdown($$anchor, $$props) {
       get renderers() {
         return renderers;
       },
+      get options() {
+        return options;
+      },
       code: code2,
       $$slots: { code: true }
     });