@krantho/ui-svelte 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Descoped
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@krantho/ui-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "Svelte 5 components that render krantho content.",
+  "license": "MIT",
+  "homepage": "https://krantho.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/descoped/krantho.git",
+    "directory": "packages/ui-svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/descoped/krantho/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "svelte": "./src/index.ts",
+  "dependencies": {
+    "@krantho/core": "1.0.1",
+    "@krantho/seo-shared": "1.0.1"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "devDependencies": {
+    "svelte-check": "^4.7.8"
+  },
+  "scripts": {
+    "build": "echo 'Svelte package uses svelte-package (not yet configured)'",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "clean": "rm -rf dist"
+  }
 }

package/src/CMSImage.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { kranthoField, type MarkedDocument } from '@krantho/core/marks'
+
+let {
+  src,
+  alt = '',
+  width,
+  height,
+  lazy = true,
+  class: className = '',
+  doc,
+  field,
+}: {
+  src: string
+  alt?: string
+  width?: number | undefined
+  height?: number | undefined
+  lazy?: boolean
+  class?: string
+  /** The document the image belongs to; in a preview, `field` is marked for Live mode */
+  doc?: MarkedDocument | undefined
+  field?: string | undefined
+} = $props()
+
+const marks = $derived(field ? kranthoField(doc, field) : {})
+
+const cssClass = $derived(`cms-image ${className}`.trim())
+</script>
+
+<img
+  {src}
+  {alt}
+  {width}
+  {height}
+  loading={lazy ? 'lazy' : undefined}
+  class={cssClass}
+  {...marks}
+/>

package/src/CMSMarkdown.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { kranthoSection, type MarkedDocument, markBodySections } from '@krantho/core/marks'
+
+let {
+  html,
+  class: className = '',
+  doc,
+  section,
+  body,
+}: {
+  html: string
+  class?: string
+  /** The document the markdown belongs to; in a preview, what it renders is marked for Live mode */
+  doc?: MarkedDocument | undefined
+  /** The `##` section `html` renders, by its heading */
+  section?: string | undefined
+  /** The markdown of a whole body `html` renders, so its lead and sections are marked */
+  body?: string | undefined
+} = $props()
+
+const cssClass = $derived(`cms-markdown ${className}`.trim())
+const marks = $derived(section ? kranthoSection(doc, section) : {})
+const rendered = $derived(!section && body !== undefined ? markBodySections(html, body, doc) : html)
+</script>
+
+<div class={cssClass} {...marks}>
+  {@html rendered}
+</div>

package/src/CMSText.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { variantToTag } from '@krantho/core'
+import { kranthoField, type MarkedDocument } from '@krantho/core/marks'
+
+let {
+  text,
+  variant = 'body1',
+  color,
+  align,
+  weight,
+  size,
+  component,
+  class: className = '',
+  doc,
+  field,
+}: {
+  text: string
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption'
+  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'inherit' | undefined
+  align?: 'left' | 'center' | 'right' | 'justify' | undefined
+  weight?: 'light' | 'regular' | 'medium' | 'bold' | undefined
+  size?: 'small' | 'medium' | 'large' | undefined
+  component?: string | undefined
+  class?: string
+  /** The document the text belongs to; in a preview, `field` is marked for Live mode */
+  doc?: MarkedDocument | undefined
+  field?: string | undefined
+} = $props()
+
+const marks = $derived(field ? kranthoField(doc, field) : {})
+
+const tag = $derived(component ?? variantToTag(variant))
+const cssClass = $derived(
+  [
+    'cms-text',
+    `cms-variant-${variant}`,
+    color && `cms-color-${color}`,
+    align && `cms-align-${align}`,
+    weight && `cms-weight-${weight}`,
+    size && `cms-size-${size}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<svelte:element this={tag} class={cssClass} {...marks}>{text}</svelte:element>

package/src/index.ts

@@ -0,0 +1,7 @@
+export { default as CMSImage } from './CMSImage.svelte'
+export { default as CMSMarkdown } from './CMSMarkdown.svelte'
+export { default as CMSText } from './CMSText.svelte'
+export { default as BreadcrumbJsonLd } from './seo/BreadcrumbJsonLd.svelte'
+export { default as FAQSchema } from './seo/FAQSchema.svelte'
+// SEO components
+export { default as JsonLd } from './seo/JsonLd.svelte'

package/src/seo/BreadcrumbJsonLd.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import JsonLd from './JsonLd.svelte'
+
+let { pathname, siteUrl = '' }: { pathname: string; siteUrl?: string } = $props()
+
+const breadcrumbs = $derived.by(() => {
+  const segments = pathname.split('/').filter(Boolean)
+  return segments.map((segment, index) => ({
+    '@type': 'ListItem' as const,
+    position: index + 1,
+    name: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
+    item: `${siteUrl}/${segments.slice(0, index + 1).join('/')}`,
+  }))
+})
+
+const jsonLd = $derived(
+  breadcrumbs.length > 0
+    ? {
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: breadcrumbs,
+      }
+    : null,
+)
+</script>
+
+{#if jsonLd}
+  <JsonLd data={jsonLd} />
+{/if}

package/src/seo/FAQSchema.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import JsonLd from './JsonLd.svelte'
+
+let {
+  items,
+}: {
+  items: Array<{ '@type': string; name: string; acceptedAnswer: { '@type': string; text: string } }>
+} = $props()
+
+const jsonLd = $derived(
+  items.length > 0
+    ? {
+        '@context': 'https://schema.org',
+        '@type': 'FAQPage',
+        mainEntity: items,
+      }
+    : null,
+)
+</script>
+
+{#if jsonLd}
+  <JsonLd data={jsonLd} />
+{/if}

package/src/seo/JsonLd.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { serializeJsonLd } from '@krantho/seo-shared'
+
+let { data }: { data: Record<string, unknown> } = $props()
+const json = $derived(serializeJsonLd(data))
+</script>
+
+<svelte:head>
+  {@html `<script type="application/ld+json">${json}</script>`}
+</svelte:head>

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.