slexkit 0.2.0

package/src/components/svelte/tooling/PlaygroundMarkdown.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import SvelteMarkdown from "../../../../node_modules/@humanspeak/svelte-markdown/dist/index.js";
+  import { KatexRenderer, markedKatex } from "../../../../node_modules/@humanspeak/svelte-markdown/dist/extensions/index.js";
+  import PlaygroundSlexCode from "./PlaygroundSlexCode.svelte";
+
+  type Props = {
+    content: string;
+    domain?: string;
+  };
+
+  let { content, domain }: Props = $props();
+
+  const extensions = [markedKatex({ singleDollarInline: true })];
+  const renderers = {
+    inlineKatex: KatexRenderer,
+    blockKatex: KatexRenderer,
+  };
+</script>
+
+<div class="slex-doc-streamdown">
+  <SvelteMarkdown source={content} {extensions} {renderers}>
+    {#snippet code({ lang, text })}
+      <PlaygroundSlexCode {lang} {text} {domain} />
+    {/snippet}
+  </SvelteMarkdown>
+</div>

package/src/components/svelte/tooling/PlaygroundSlexCode.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { mount, parseSlexSource } from "../../../engine/index";
+
+  type Props = {
+    lang?: string;
+    text?: string;
+    domain?: string;
+  };
+
+  let { lang = "", text = "", domain }: Props = $props();
+  let error = $state<unknown>(null);
+
+  const language = $derived(String(lang ?? "").trim().split(/\s+/, 1)[0].toLowerCase());
+  const isSlexKit = $derived(language === "slex");
+  const runtimeInput = $derived(scopedSlexKitInput(text, domain));
+
+  function renderPreview(node: HTMLElement) {
+    let cleanup: (() => void) | undefined;
+
+    const render = () => {
+      cleanup?.();
+      node.replaceChildren();
+      error = null;
+      if (!isSlexKit) return;
+
+      try {
+        cleanup = mount(runtimeInput, node);
+      } catch (err) {
+        error = err;
+      }
+    };
+
+    render();
+    return {
+      update: render,
+      destroy() {
+        cleanup?.();
+        node.replaceChildren();
+      },
+    };
+  }
+
+  function scopedSlexKitInput(code: string, scope: string | undefined) {
+    if (!scope) return code;
+    const parsed = parseSlexSource(code);
+    if (!parsed.ok || !parsed.value || typeof parsed.value !== "object") {
+      return code;
+    }
+    const source = parsed.value as Record<string, unknown>;
+    if (!("namespace" in source) && !("g" in source) && !("layout" in source) && Object.keys(source).some((key) => key.includes(":"))) {
+      const { slex, ...layout } = source;
+      return {
+        ...(typeof slex === "string" ? { slex } : {}),
+        namespace: `${scope}::default`,
+        layout,
+      };
+    }
+    return {
+      ...source,
+      namespace: `${scope}::${String(source.namespace || "default")}`,
+    };
+  }
+</script>
+
+{#if isSlexKit}
+  {#if error}
+    <div class="slex-streamdown-error" role="alert">
+      <div class="slex-streamdown-error-title">Failed to render SlexKit</div>
+      <div class="slex-streamdown-error-message">{error instanceof Error ? error.message : String(error)}</div>
+    </div>
+  {:else}
+    <div use:renderPreview={runtimeInput}></div>
+  {/if}
+{:else}
+  <pre class={lang}><code>{text}</code></pre>
+{/if}

package/src/components/svelte/types.ts

@@ -0,0 +1,17 @@
+import type { Component } from "svelte";
+import type { RenderContext } from "../../engine/types";
+
+export type PropValues = Record<string, unknown>;
+
+export type PropStore = {
+  subscribe(run: (value: PropValues) => void): () => void;
+};
+
+export type SvelteComponentProps = {
+  componentName: string;
+  ctx: RenderContext;
+  props: PropStore;
+};
+
+export type SvelteBuiltinComponent = Component<SvelteComponentProps>;
+

package/src/styles/animation.css

@@ -0,0 +1,98 @@
+@keyframes slex-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slex-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@keyframes slex-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slex-slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+}
+
+@keyframes slex-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.slex-fade-in {
+  animation: slex-fade-in 0.3s ease-out;
+}
+
+.slex-fade-out {
+  animation: slex-fade-out 0.3s ease-out;
+}
+
+.slex-slide-in {
+  animation: slex-slide-in 0.3s ease-out;
+}
+
+.slex-slide-out {
+  animation: slex-slide-out 0.3s ease-out;
+}
+
+.slex-pulse {
+  animation: slex-pulse 2s ease-in-out infinite;
+}
+
+.slex-enter {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+@keyframes slex-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.slex-scale-in {
+  animation-name: slex-scale-in;
+}
+
+@media (max-width: 640px) {
+  .slex-card {
+    padding: 1rem;
+  }
+
+  .slex-stat-value {
+    font-size: 1.25rem;
+  }
+}

package/src/styles/components/button.css

@@ -0,0 +1,114 @@
+.slex-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.slex-button--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
+.slex-button--primary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--primary) 90%, transparent);
+  border-color: color-mix(in oklab, var(--primary) 90%, transparent);
+  color: var(--primary-foreground);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.slex-button--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--secondary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--danger {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+  border-color: var(--destructive);
+}
+
+.slex-button--danger:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--destructive) 90%, transparent);
+  border-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+}
+
+.slex-button--ghost {
+  background: transparent;
+  color: var(--muted-foreground);
+  border-color: transparent;
+}
+
+.slex-button--ghost:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.slex-button:disabled,
+.slex-button[disabled],
+.slex-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+  box-shadow: none;
+}
+
+.slex-button:active:not(:disabled):not(.slex-button--disabled) {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.slex-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slex-button--icon {
+  width: var(--slex-control-height, 2.25rem);
+  min-height: var(--slex-control-height, 2.25rem);
+  padding-inline: 0;
+}
+
+.slex-button-icon {
+  display: inline-flex;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: currentColor;
+}
+
+.slex-button-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}

package/src/styles/components/choice.css

@@ -0,0 +1,165 @@
+.slex-checkbox-field,
+.slex-radio-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+  transition: color 150ms ease, opacity 150ms ease;
+}
+
+.slex-checkbox-label,
+.slex-radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--foreground);
+  line-height: 1.35;
+  transition: color 150ms ease;
+}
+
+.slex-checkbox,
+.slex-radio {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  border: 1.5px solid var(--input);
+  color: var(--primary);
+  accent-color: var(--primary);
+  background: var(--background);
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    transform 120ms ease;
+}
+
+.slex-checkbox {
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.slex-radio {
+  border-radius: 999px;
+}
+
+.slex-checkbox::after,
+.slex-radio::after {
+  content: "";
+  display: block;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 120ms ease, transform 140ms ease;
+}
+
+.slex-checkbox::after {
+  width: 0.55rem;
+  height: 0.34rem;
+  border: solid var(--primary-foreground);
+  border-width: 0 0 2px 2px;
+  transform: translateY(-0.08rem) rotate(-45deg) scale(0.5);
+}
+
+.slex-radio::after {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: var(--primary-foreground);
+}
+
+.slex-checkbox-field:hover .slex-checkbox:not(:disabled),
+.slex-radio-field:hover .slex-radio:not(:disabled) {
+  border-color: color-mix(in oklab, var(--primary) 48%, var(--input));
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
+}
+
+.slex-checkbox-field:active .slex-checkbox:not(:disabled),
+.slex-radio-field:active .slex-radio:not(:disabled) {
+  transform: scale(0.92);
+  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
+}
+
+.slex-checkbox:checked,
+.slex-radio:checked {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+.slex-checkbox:checked::after,
+.slex-radio:checked::after {
+  opacity: 1;
+}
+
+.slex-checkbox:checked::after {
+  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
+}
+
+.slex-radio:checked::after {
+  transform: scale(1);
+}
+
+.slex-checkbox-field:hover .slex-checkbox-label,
+.slex-radio-field:hover .slex-radio-label {
+  color: var(--foreground);
+}
+
+.slex-checkbox:focus-visible,
+.slex-radio:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slex-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.slex-radio-group-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.slex-radio-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.slex-radio-group[data-orientation="horizontal"] .slex-radio-group-list {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.slex-checkbox:disabled,
+.slex-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+  transform: none;
+}
+
+.slex-checkbox-field:has(.slex-checkbox:disabled),
+.slex-radio-field:has(.slex-radio:disabled) {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.slex-radio-indicator {
+  display: none;
+}