@karagoz/hayali 0.0.0-stage → 0.6.0

package/package.json

@@ -1,6 +1,90 @@
 {
   "name": "@karagoz/hayali",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.0",
+  "private": false,
+  "homepage": "https://karagoz.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/frontendat/karagoz.git"
+  },
+  "files": [
+    "dist",
+    "src/lib.css",
+    "src/layout.css"
+  ],
+  "type": "module",
+  "main": "./dist/karagoz-hayali.umd.cjs",
+  "module": "./dist/karagoz-hayali.js",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types.d.ts",
+        "default": "./dist/karagoz-hayali.js"
+      },
+      "require": {
+        "types": "./dist/types.d.ts",
+        "default": "./dist/karagoz-hayali.umd.cjs"
+      }
+    },
+    "./dist/karagoz-hayali.css": {
+      "import": "./dist/karagoz-hayali.css",
+      "require": "./dist/karagoz-hayali.css"
+    },
+    "./parse": {
+      "import": {
+        "types": "./dist/src/parse/index.d.ts",
+        "default": "./dist/parse.js"
+      },
+      "require": {
+        "types": "./dist/src/parse/index.d.ts",
+        "default": "./dist/parse.cjs"
+      }
+    },
+    "./style.css": "./src/lib.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.3.0",
+    "ignore": "^6.0.2",
+    "markdown-it": "^14.2.0",
+    "markdown-it-container": "^4.0.0",
+    "radix-vue": "^1.9.17",
+    "vue-markdown-render": "^2.3.1",
+    "yaml": "^2.9.1",
+    "@karagoz/sandbox": "^0.6.0",
+    "@karagoz/shared": "^0.6.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.21",
+    "vue-i18n": "^11.4.6"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-container": "^4.0.1",
+    "jiti": "^2.7.0"
+  },
+  "scripts": {
+    "dev": "pnpm --filter @karagoz/hayali --parallel /^watch:/",
+    "dev-hmr": "vite",
+    "build": "vite build && vite build -c vite.parse.config.ts && vue-tsc --declaration --emitDeclarationOnly",
+    "prepublish": "pnpm build",
+    "preview": "vite preview",
+    "watch:vite": "vite build --watch",
+    "watch:vite-parse": "vite build -c vite.parse.config.ts --watch",
+    "watch:vue-tsc": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "lint": "oxlint src",
+    "lint:fix": "oxlint --fix src",
+    "fmt": "oxfmt src",
+    "fmt:check": "oxfmt --check src",
+    "docs": "pnpm docs:typescript && sleep 1 && pnpm docs:components && pnpm docs:copy",
+    "docs:components": "vue-docgen -c docs/docgen.config.cjs",
+    "docs:typescript": "typedoc --options docs/typedoc.json && rm ./docs/.generated-docs/README.md",
+    "docs:copy": "cp -a ./docs/.generated-docs/. ../../apps/docs/content/en/hayali/4.api-reference/",
+    "gen:layout": "jiti scripts/gen-layout.ts && oxfmt src/layout.css",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }

package/src/layout.css

@@ -0,0 +1,218 @@
+/* Generated by src/layout/layoutCss.ts (pnpm gen:layout). Do not edit. */
+.hf [data-hf-pane] {
+  min-width: 0;
+}
+.hf [data-hf-pane='lesson'] {
+  min-width: var(--hf-lesson-minw, 0);
+}
+.hf [data-hf-pane='sandbox'] {
+  min-width: var(--hf-sandbox-minw, 0);
+}
+.hf[data-panel='lesson'] [data-hf-pane='sandbox'],
+.hf[data-panel='sandbox'] [data-hf-pane='lesson'] {
+  display: var(--hf-pane-display, none);
+}
+.hf [data-hf-handle] {
+  display: var(--hf-handle-display, none);
+}
+.hf [data-hf-toggle] {
+  display: var(--hf-toggle-display, block);
+}
+
+@container hayali (min-width: 20rem) {
+  .hf-root[data-from='xs'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 24rem) {
+  .hf-root[data-from='sm'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 28rem) {
+  .hf-root[data-from='md'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 32rem) {
+  .hf-root[data-from='lg'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 36rem) {
+  .hf-root[data-from='xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 42rem) {
+  .hf-root[data-from='2xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 48rem) {
+  .hf-root[data-from='3xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 56rem) {
+  .hf-root[data-from='4xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 64rem) {
+  .hf-root[data-from='5xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 72rem) {
+  .hf-root[data-from='6xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}
+
+@container hayali (min-width: 80rem) {
+  .hf-root[data-from='7xl'] {
+    --hf-pane-display: block;
+    --hf-handle-display: flex;
+    --hf-toggle-display: none;
+    --hf-tb-order: -1;
+    --hf-tb-bw: 0 0 1px 0;
+    --hf-tb-px: 1.75rem;
+    --hf-next-order: 0;
+    --hf-next-me: 0px;
+    --hf-toc-flex: 0 1 auto;
+    --hf-toc-justify: flex-start;
+    --hf-lesson-minw: 300px;
+    --hf-sandbox-minw: 460px;
+    --hf-sandbox-me: 1.25rem;
+  }
+}

package/src/lib.css

@@ -0,0 +1,50 @@
+@import './layout.css';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Color tokens resolve to the CSS variables defined by @karagoz/shared's stylesheet. */
+@theme inline {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.