@cloudvoyant/helical-svelte 0.19.0

package/dist/card/CardBody.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CardBody: import("svelte").Component<Props, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;

package/dist/card/CardCover.svelte

@@ -0,0 +1,26 @@
+<!-- libs/helical-svelte/src/card/CardCover.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardCoverVariants, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'flush' | 'inset';
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { variant = 'flush', orientation, class: className = '', children, ...rest }: Props = $props();
+
+  const contextOrientation = getContext<'vertical' | 'horizontal'>('card-orientation');
+
+  const classes = $derived(cn(cardCoverVariants({ variant, orientation: orientation ?? contextOrientation }), className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/CardCover.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'flush' | 'inset';
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CardCover: import("svelte").Component<Props, {}, "">;
+type CardCover = ReturnType<typeof CardCover>;
+export default CardCover;

package/dist/card/CardDescription.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/CardDescription.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardDescriptionBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLParagraphElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(cardDescriptionBase, className));
+</script>
+
+<Ark as="p" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/CardDescription.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLParagraphElement>;
+declare const CardDescription: import("svelte").Component<Props, {}, "">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

package/dist/card/CardFooter.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/CardFooter.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardFooterBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(cardFooterBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/CardFooter.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CardFooter: import("svelte").Component<Props, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/card/CardHeader.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/CardHeader.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardHeaderBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(cardHeaderBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/CardHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/card/CardTitle.svelte

@@ -0,0 +1,22 @@
+<!-- libs/helical-svelte/src/CardTitle.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardTitleBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+    asChild?: Snippet<[(props?: SvelteHTMLElements['h3']) => HTMLAttributes<HTMLElement>]>;
+  } & HTMLAttributes<HTMLHeadingElement>;
+
+  let { class: className = '', children, asChild, ...rest }: Props = $props();
+
+  const classes = $derived(cn(cardTitleBase, className));
+</script>
+
+<Ark as="h3" class={classes} {asChild} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/CardTitle.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+    asChild?: Snippet<[(props?: SvelteHTMLElements['h3']) => HTMLAttributes<HTMLElement>]>;
+} & HTMLAttributes<HTMLHeadingElement>;
+declare const CardTitle: import("svelte").Component<Props, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/card/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardCover } from './CardCover.svelte';

package/dist/card/index.js

@@ -0,0 +1,8 @@
+// libs/helical-svelte/src/card/index.ts
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardCover } from './CardCover.svelte';

package/dist/checkbox/Checkbox.svelte

@@ -0,0 +1,23 @@
+<!-- libs/helical-svelte/src/checkbox/Checkbox.svelte -->
+<!-- Closely based on: Shark UI checkbox (@ark-ui/svelte/checkbox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { CheckboxRoot, CheckboxHiddenInput, type CheckboxRootProps } from '@ark-ui/svelte/checkbox';
+  import { cn } from '@cloudvoyant/helical-ui';
+
+  type Props = CheckboxRootProps & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  let { size = 'md', class: className = '', children, ...rest }: Props = $props();
+
+  setContext<'sm' | 'md' | 'lg'>('checkbox-size', size);
+
+  const classes = $derived(cn('flex items-center gap-2', className));
+</script>
+
+<CheckboxRoot class={classes} {...rest}>
+  {@render children?.()}
+  <CheckboxHiddenInput />
+</CheckboxRoot>

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CheckboxRootProps } from '@ark-ui/svelte/checkbox';
+type Props = CheckboxRootProps & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/checkbox/CheckboxContext.svelte.d.ts

@@ -0,0 +1 @@
+export { useCheckboxContext as useCheckbox } from '@ark-ui/svelte/checkbox';

package/dist/checkbox/CheckboxContext.svelte.js

@@ -0,0 +1,3 @@
+// libs/helical-svelte/src/checkbox/CheckboxContext.svelte.ts
+// Closely based on: @ark-ui/svelte/checkbox useCheckboxContext, mirrored from @cloudvoyant/helical-react useCheckbox
+export { useCheckboxContext as useCheckbox } from '@ark-ui/svelte/checkbox';

package/dist/checkbox/CheckboxControl.svelte

@@ -0,0 +1,17 @@
+<!-- libs/helical-svelte/src/checkbox/CheckboxControl.svelte -->
+<!-- Closely based on: Shark UI checkbox (@ark-ui/svelte/checkbox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { CheckboxControl, type CheckboxControlProps } from '@ark-ui/svelte/checkbox';
+  import { checkboxVariants, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: CheckboxControlProps = $props();
+
+  const size = getContext<'sm' | 'md' | 'lg'>('checkbox-size');
+
+  const classes = $derived(cn(checkboxVariants({ size }), className));
+</script>
+
+<CheckboxControl class={classes} {...rest}>
+  {@render children?.()}
+</CheckboxControl>

package/dist/checkbox/CheckboxControl.svelte.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxControl, type CheckboxControlProps } from '@ark-ui/svelte/checkbox';
+declare const CheckboxControl: import("svelte").Component<CheckboxControlProps, {}, "">;
+type CheckboxControl = ReturnType<typeof CheckboxControl>;
+export default CheckboxControl;

package/dist/checkbox/CheckboxGroup.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/checkbox/CheckboxGroup.svelte -->
+<!-- Closely based on: Shark UI checkbox (@ark-ui/svelte/checkbox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { CheckboxGroup, type CheckboxGroupProps } from '@ark-ui/svelte/checkbox';
+  import { checkboxGroupBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: CheckboxGroupProps = $props();
+
+  const classes = $derived(cn(checkboxGroupBase, className));
+</script>
+
+<CheckboxGroup class={classes} {...rest}>
+  {@render children?.()}
+</CheckboxGroup>

package/dist/checkbox/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxGroup, type CheckboxGroupProps } from '@ark-ui/svelte/checkbox';
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/checkbox/CheckboxIndicator.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/checkbox/CheckboxIndicator.svelte -->
+<!-- Closely based on: Shark UI checkbox (@ark-ui/svelte/checkbox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { CheckboxIndicator, type CheckboxIndicatorProps } from '@ark-ui/svelte/checkbox';
+  import { checkboxIndicatorBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: CheckboxIndicatorProps = $props();
+
+  const classes = $derived(cn(checkboxIndicatorBase, className));
+</script>
+
+<CheckboxIndicator class={classes} {...rest}>
+  {@render children?.()}
+</CheckboxIndicator>

package/dist/checkbox/CheckboxIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxIndicator, type CheckboxIndicatorProps } from '@ark-ui/svelte/checkbox';
+declare const CheckboxIndicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+type CheckboxIndicator = ReturnType<typeof CheckboxIndicator>;
+export default CheckboxIndicator;

package/dist/checkbox/CheckboxLabel.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/checkbox/CheckboxLabel.svelte -->
+<!-- Closely based on: Shark UI checkbox (@ark-ui/svelte/checkbox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { CheckboxLabel, type CheckboxLabelProps } from '@ark-ui/svelte/checkbox';
+  import { checkboxLabelBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: CheckboxLabelProps = $props();
+
+  const classes = $derived(cn(checkboxLabelBase, className));
+</script>
+
+<CheckboxLabel class={classes} {...rest}>
+  {@render children?.()}
+</CheckboxLabel>

package/dist/checkbox/CheckboxLabel.svelte.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxLabel, type CheckboxLabelProps } from '@ark-ui/svelte/checkbox';
+declare const CheckboxLabel: import("svelte").Component<CheckboxLabelProps, {}, "">;
+type CheckboxLabel = ReturnType<typeof CheckboxLabel>;
+export default CheckboxLabel;

package/dist/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CheckboxControl } from './CheckboxControl.svelte';
+export { default as CheckboxIndicator } from './CheckboxIndicator.svelte';
+export { default as CheckboxLabel } from './CheckboxLabel.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { useCheckbox } from './CheckboxContext.svelte';

package/dist/checkbox/index.js

@@ -0,0 +1,7 @@
+// libs/helical-svelte/src/checkbox/index.ts
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CheckboxControl } from './CheckboxControl.svelte';
+export { default as CheckboxIndicator } from './CheckboxIndicator.svelte';
+export { default as CheckboxLabel } from './CheckboxLabel.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { useCheckbox } from './CheckboxContext.svelte';

package/dist/code-block/CodeBlock.svelte

@@ -0,0 +1,67 @@
+<!-- libs/helical-svelte/src/code-block/CodeBlock.svelte -->
+<!-- Closely based on: diffbook code-block family, rebuilt as a composable API, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CodeBlockHeader from './CodeBlockHeader.svelte';
+  import CodeBlockTitle from './CodeBlockTitle.svelte';
+  import CodeBlockContent from './CodeBlockContent.svelte';
+  import CodeBlockCopyButton from './CodeBlockCopyButton.svelte';
+  import { codeBlockRootBase, cn } from '@cloudvoyant/helical-ui';
+  import { setContext } from 'svelte';
+  import { CODE_BLOCK_KEY, type CodeBlockContextValue } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    code: string;
+    language?: string;
+    filename?: string;
+    html?: string;
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    highlightLines?: number[];
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    code,
+    language = 'tsx',
+    filename,
+    html = undefined,
+    showLineNumbers = false,
+    scrollable = false,
+    maxHeight = 400,
+    highlightLines = undefined,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  setContext<CodeBlockContextValue>(CODE_BLOCK_KEY, {
+    code,
+    language,
+    html,
+    showLineNumbers,
+    scrollable,
+    maxHeight,
+    highlightLines,
+  });
+
+  const classes = $derived(cn(codeBlockRootBase, className));
+</script>
+
+<Ark as="div" data-code-block class={classes} {...rest}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <CodeBlockHeader>
+      <CodeBlockTitle>{filename ?? language}</CodeBlockTitle>
+      <div class="ml-auto">
+        <CodeBlockCopyButton />
+      </div>
+    </CodeBlockHeader>
+    <CodeBlockContent />
+  {/if}
+</Ark>

package/dist/code-block/CodeBlock.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    code: string;
+    language?: string;
+    filename?: string;
+    html?: string;
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    highlightLines?: number[];
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/code-block/CodeBlockContent.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/code-block/CodeBlockContent.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CodeRenderer from './CodeRenderer.svelte';
+  import { codeBlockContext } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = { html?: string; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { html = undefined, class: className = '', ...rest }: Props = $props();
+
+  const ctx = codeBlockContext();
+  if (!ctx) {
+    throw new Error('CodeBlockContent must be rendered inside a CodeBlock.');
+  }
+</script>
+
+<Ark as="div" class={className} {...rest}>
+  <CodeRenderer {...ctx} html={html ?? ctx.html} />
+</Ark>

package/dist/code-block/CodeBlockContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    html?: string;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlockContent: import("svelte").Component<Props, {}, "">;
+type CodeBlockContent = ReturnType<typeof CodeBlockContent>;
+export default CodeBlockContent;

package/dist/code-block/CodeBlockContext.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface CodeBlockContextValue {
+    code: string;
+    language: string;
+    html?: string;
+    showLineNumbers: boolean;
+    scrollable: boolean;
+    maxHeight: number;
+    highlightLines?: number[];
+}
+export declare const CODE_BLOCK_KEY: unique symbol;
+export declare function codeBlockContext(): CodeBlockContextValue | undefined;

package/dist/code-block/CodeBlockContext.svelte.js

@@ -0,0 +1,7 @@
+// libs/helical-svelte/src/code-block/CodeBlockContext.svelte.ts
+// Shared code-block context so composite parts (Title/Content/CopyButton) read the block's props.
+import { getContext } from 'svelte';
+export const CODE_BLOCK_KEY = Symbol('helical-ui-code-block');
+export function codeBlockContext() {
+    return getContext(CODE_BLOCK_KEY);
+}

package/dist/code-block/CodeBlockCopyButton.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/code-block/CodeBlockCopyButton.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CopyButton from '../CopyButton.svelte';
+  import { codeBlockContext } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = { label?: string; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { label = 'Copy code', class: className = '', ...rest }: Props = $props();
+
+  const ctx = codeBlockContext();
+  if (!ctx) {
+    throw new Error('CodeBlockCopyButton must be rendered inside a CodeBlock.');
+  }
+</script>
+
+<Ark as="div" class={className} {...rest}>
+  <CopyButton value={ctx.code} {label} />
+</Ark>

package/dist/code-block/CodeBlockCopyButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    label?: string;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlockCopyButton: import("svelte").Component<Props, {}, "">;
+type CodeBlockCopyButton = ReturnType<typeof CodeBlockCopyButton>;
+export default CodeBlockCopyButton;

package/dist/code-block/CodeBlockHeader.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helical-svelte/src/code-block/CodeBlockHeader.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { codeBlockHeaderBase, cn } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = { children?: Snippet; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { children, class: className = '', ...rest }: Props = $props();
+  const classes = $derived(cn(codeBlockHeaderBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {#if children}{@render children()}{/if}
+</Ark>

package/dist/code-block/CodeBlockHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlockHeader: import("svelte").Component<Props, {}, "">;
+type CodeBlockHeader = ReturnType<typeof CodeBlockHeader>;
+export default CodeBlockHeader;

package/dist/code-block/CodeBlockTitle.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helical-svelte/src/code-block/CodeBlockTitle.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { codeBlockTitleBase, cn } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = { children?: Snippet; class?: string } & HTMLAttributes<HTMLSpanElement>;
+  let { children, class: className = '', ...rest }: Props = $props();
+  const classes = $derived(cn(codeBlockTitleBase, className));
+</script>
+
+<Ark as="span" class={classes} {...rest}>
+  {#if children}{@render children()}{/if}
+</Ark>

package/dist/code-block/CodeBlockTitle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const CodeBlockTitle: import("svelte").Component<Props, {}, "">;
+type CodeBlockTitle = ReturnType<typeof CodeBlockTitle>;
+export default CodeBlockTitle;