bref-ui 0.3.1 → 2.0.1

package/dist/tree-view/tree-view.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import TreeNode from './tree-node/tree-node.svelte';
+	import TreeViewSection from './tree-view-section.svelte';
+	import type { TreeViewProps } from './types.js';
+
+	let {
+		items,
+		sections = [],
+		label = 'Tree view',
+		size = 'medium',
+		selection = $bindable(),
+		defaultExpanded = false,
+		onDelete,
+		node
+	}: TreeViewProps = $props();
+</script>
+
+{#snippet nodes(items: TreeViewProps['items'])}
+	<div data-nodes>
+		{#each items as item (item.id)}
+			{#if node}
+				{@render node(item)}
+			{:else}
+				<TreeNode {item} bind:selection {defaultExpanded} {onDelete} />
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div role="group" aria-label={label} data-size={size}>
+	{@render nodes(items)}
+	{#each sections as section (section.id)}
+		<section aria-label={section.label}>
+			<TreeViewSection {...section} />
+			{@render nodes(section.items)}
+		</section>
+	{/each}
+</div>
+
+<style>
+	div {
+		--tree-height: 2.75rem;
+		--tree-action-size: 2.25rem;
+		display: grid;
+		gap: 0.375rem;
+		min-width: 0;
+		color: var(--color-foreground);
+		font: inherit;
+	}
+	div[data-size='small'] {
+		--tree-height: 2.5rem;
+		--tree-action-size: 2rem;
+		font-size: 0.875rem;
+	}
+	div[data-size='large'] {
+		--tree-height: 3.25rem;
+		--tree-action-size: 2.5rem;
+		font-size: 1.125rem;
+	}
+	div[data-nodes] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+</style>

package/dist/{base/tree-view → tree-view}/tree-view.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TreeViewProps } from './types.ts';
-declare const TreeView: import("svelte").Component<TreeViewProps, {}, "">;
+import type { TreeViewProps } from './types.js';
+declare const TreeView: import("svelte").Component<TreeViewProps, {}, "selection">;
 type TreeView = ReturnType<typeof TreeView>;
 export default TreeView;

package/dist/tree-view/types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { BaseSize, IconProps } from '../types.js';
+export interface TreeItemProps {
+    id: string;
+    label: string;
+    icon?: Omit<IconProps, 'label' | 'size' | 'color'>;
+    children?: TreeItemProps[];
+    disabled?: boolean;
+}
+export interface TreeSectionProps extends Pick<TreeItemProps, 'id' | 'label' | 'icon'> {
+    description?: string;
+    items: TreeItemProps[];
+}
+export interface TreeViewProps {
+    items: TreeItemProps[];
+    sections?: TreeSectionProps[];
+    label?: string;
+    size?: BaseSize;
+    selection?: string | string[];
+    defaultExpanded?: boolean;
+    onDelete?: (id: string) => void;
+    node?: Snippet<[TreeItemProps]>;
+}
+export interface TreeNodeProps extends Pick<TreeViewProps, 'selection' | 'defaultExpanded' | 'onDelete'> {
+    item: TreeItemProps;
+    indent?: number;
+}
+export interface TreeNodeContentProps extends HTMLButtonAttributes {
+    item: TreeItemProps;
+}

package/dist/tree-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+export type BaseSize = 'small' | 'medium' | 'large';
+export type Size = 'x-small' | BaseSize | 'x-large';
+export type Variant = 'neutral' | 'soft' | 'filled';
+export type StatusColor = 'info' | 'success' | 'warning' | 'error';
+export type Color = 'primary' | 'secondary' | 'foreground' | 'background' | 'muted' | StatusColor;
+export type Orientation = 'horizontal' | 'vertical';
+export type Dimension = 'fit' | 'fill';
+export type { ButtonProps } from './button/types.js';
+export type { ComboboxProps, ComboboxNativeProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionProps, ComboboxFormProps } from './combobox/types.js';
+export type * from './icon/types.js';
+export type { SurfaceBaseProps, SurfaceProps, SurfaceRadius } from './surface/types.js';
+export type * from './theme/types.ts';
+export type { CheckboxProps } from './checkbox/types.js';
+export type { SwitchProps } from './switch/types.js';
+export type { ProgressProps } from './progress/types.js';
+export type { SpinnerProps } from './spinner/types.js';
+export type { PopoverProps } from './popover/types.js';
+export type { DialogActionProps, DialogHeaderDataProps, DialogHeaderProps, DialogProps } from './dialog/types.js';
+export type { TextInputProps } from './text-input/types.js';
+export type { TextAreaProps } from './text-area/types.js';
+export type * from './tree-view/types.js';
+export type { PillDataProps, PillProps } from './pill/types.js';
+export type { PillGroupProps } from './pill-group/types.js';
+export type { PillChoiceGroupProps } from './pill-choice-group/types.js';
+export type { OptionProps, SelectEmptyProps, SelectOptionDataProps, SelectListProps, SelectProps, SelectTriggerProps } from './select/types.js';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,16 +1,15 @@
 {
 	"name": "bref-ui",
-	"version": "0.3.1",
-	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
+	"version": "2.0.1",
+	"description": "A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.",
 	"license": "MIT",
-	"author": "feuerstein",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/feuersteiner/bref.git"
+		"url": "git+https://github.com/feuersteiner/bref-ui.git"
 	},
-	"homepage": "https://feuersteiner.github.io/bref/",
+	"homepage": "https://github.com/feuersteiner/bref-ui#readme",
 	"bugs": {
-		"url": "https://github.com/feuersteiner/bref/issues"
+		"url": "https://github.com/feuersteiner/bref-ui/issues"
 	},
 	"scripts": {
 		"dev": "vite dev",
@@ -18,16 +17,18 @@
 		"demo-site-build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
+		"prepack": "bun cli/pack.ts && bun run svelte-kit sync && bun run svelte-package && bun run publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
 	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"cli/**/*.ts",
+		"src/lib"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -39,46 +40,66 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./types": {
+			"types": "./dist/types.d.ts"
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.56.1"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.4.0",
-		"@eslint/js": "^9.39.1",
-		"@fontsource/meow-script": "^5.2.8",
-		"@fontsource/spectral": "^5.2.8",
-		"@sveltejs/adapter-auto": "^7.0.0",
+		"@eslint/js": "^10.0.1",
+		"@fontsource-variable/bricolage-grotesque": "^5.3.0",
+		"@fontsource-variable/inter": "^5.3.0",
+		"@fontsource-variable/syne": "^5.3.0",
+		"@fontsource/meow-script": "5.2.8",
+		"@fontsource/spectral": "5.2.8",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.49.1",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@types/bun": "^1.4.2",
 		"@types/node": "^22",
-		"eslint": "^9.39.1",
+		"eslint": "^10.4.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.13.1",
-		"globals": "^16.5.0",
-		"prettier": "^3.7.4",
-		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.15",
-		"svelte": "^5.45.6",
-		"svelte-check": "^4.3.4",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.48.1",
-		"vite": "^7.2.6"
+		"eslint-plugin-check-file": "^3.3.2",
+		"eslint-plugin-svelte": "^3.19.0",
+		"globals": "^17.6.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"publint": "^0.3.21",
+		"shiki": "^4.4.3",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.6.0",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.60.1",
+		"vite": "^8.0.16"
 	},
 	"keywords": [
 		"svelte",
 		"svelte5",
+		"sveltekit",
+		"svelte-components",
 		"ui",
-		"components",
+		"ui-library",
 		"component-library",
+		"components",
 		"design-system",
-		"css"
+		"copy-paste",
+		"cli",
+		"native-css",
+		"theming",
+		"dark-mode",
+		"accessible",
+		"a11y",
+		"ai-friendly",
+		"agent-friendly"
 	],
 	"dependencies": {
-		"@fontsource-variable/material-symbols-rounded": "^5.2.30",
-		"colord": "^2.9.3"
+		"@fontsource-variable/material-symbols-outlined": "^5.3.5"
+	},
+	"bin": {
+		"bref-ui": "cli/index.ts"
 	}
 }

package/readme.md

@@ -0,0 +1,157 @@
+# Bref-ui
+
+A Svelte-first, human-first, agent-first UI library for building beautiful sites
+and apps with components you can make your own.
+
+[![npm](https://img.shields.io/npm/v/bref-ui?logo=npm)](https://www.npmjs.com/package/bref-ui)
+[![Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white)](https://discord.gg/JpgQRTUsVS)
+[![MIT license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
+
+> <small>V2 is in development and has not been published to npm. The npm badge tracks the
+> published release; the examples below use the v2 development checkout. Button,
+> Icon, Surface, Theme and ThemeModeToggle exist today. Agent skills, site generation
+> and live generative UI are planned.</small>
+
+## Get started
+
+### Explore the gallery
+
+Use Bun and Node 22.12+ within Node 22, or Node 24:
+
+```sh
+git clone https://github.com/feuersteiner/bref-ui.git
+cd bref-ui
+bun install
+bun run dev
+```
+
+Open the URL printed in the terminal. The gallery includes component examples,
+props and theme customization on `/button`, `/icon` and `/theme`.
+
+### Use the local package
+
+The CLI/registry changes are currently local and uncommitted, so they are absent
+from the clone above. This section and the copy workflow below require the
+development checkout containing those changes.
+
+In that checkout, build a local package:
+
+```sh
+bun run build
+npm pack --ignore-scripts
+```
+
+This produces `bref-ui-2.0.0.tgz`. In an existing Svelte 5.56.1+ project with its
+dependencies installed, install that tarball, replacing the example path:
+
+```sh
+npm install /path/to/bref-ui-2.0.0.tgz
+```
+
+Then use the components in a `.svelte` file:
+
+```svelte
+<script lang="ts">
+	import { Button, Theme } from 'bref-ui';
+
+	let count = $state(0);
+</script>
+
+<Theme />
+<Button label={`Count: ${count}`} onClick={() => count++} />
+```
+
+The button increments the count when clicked. The current Button uses `label` and
+`onClick`; the gallery documents each component's current API.
+
+Render `Theme` once in the application root to opt into its palette, reset and
+Material Symbols font setup. The current package declares a Material Symbols font
+dependency, so zero runtime dependencies beyond Svelte remains a goal.
+
+### Shared surface styles
+
+Theme composes internal colors, surfaces, fonts and styles components. Surface and
+Button use the same paint recipe; apply it to native HTML with the typed helper:
+
+```svelte
+<script>
+	import { Theme, surface } from 'bref-ui';
+</script>
+
+<Theme />
+<button class={surface({ variant: 'filled', color: 'primary', shadow: 'small', hover: 'medium' })}>
+	Save
+</button>
+```
+
+All options are optional: variant defaults to neutral and color to foreground;
+shadow and hover accept small, medium or large. Shadow also accepts true for medium
+and false for none. SurfaceProps extends SurfaceBaseProps with component props.
+Supply padding, radius and layout
+in element styles. The helper adds classes only; Theme loads their CSS. SurfaceBaseProps
+is available from `bref-ui/types`. Copied components include the helper in
+`theme/surface.ts`; the local UI barrel keeps component exports only.
+
+## Why Bref-ui?
+
+1. **Svelte-first.** The goal is modern components with zero runtime dependencies
+   beyond Svelte, built from scoped CSS, familiar HTML, native events, bindings and
+   snippets. Readable styles, with no class-name vocabulary to memorize. The
+   collection will grow from small UI components to marketing sections and
+   complete app interfaces.
+2. **Human-first.** Composable components with full control over appearance and
+   behavior. Inspired by shadcn's source ownership model, tooling brings component
+   source into the project for unrestricted customization. Planned agent skills
+   and validation tools help developers adapt components while preserving native
+   behavior and accessibility.
+3. **Agent-first.** A component collection paired with tools that help agents
+   discover, compose, customize and verify interfaces. Planned capabilities include
+   complete site generation, generative UI and interactive interfaces for agent
+   workflows.
+
+## Copy components into a project (WIP)
+
+The local package includes the `bref` executable. After installing the tarball,
+preview and accept the setup and Button copies:
+
+Run `bun run bref-ui add theme` to copy the default-only Theme source into the configured UI directory. The copied `Theme` has no `palette` prop; edit its CSS tokens directly. The package `Theme` retains the `palette` prop. Button copies include Icon and required types. SvelteKit can use
+`--alias '$lib/bref'` during init after its existing sync command.
+
+## Documentation and demos
+
+Run `bun run dev` in the repository for the gallery and current API documentation.
+Explore the [component exports](src/lib/index.ts) and [component source](src/lib)
+to inspect and customize the implementation.
+
+## Roadmap
+
+- **Component foundation:** inputs/textarea, pills, tree views, loading/progress,
+  static theme tooling and complete npm/copy distribution. Planned theme tooling
+  emits the existing light/dark palette with literal primary and per-mode overrides;
+  contrast failures are reported without silently replacing inputs.
+- **Marketing sites:** reusable sections and design recipes, then validated YAML/JSON
+  generation of complete SvelteKit sites with content, assets, routes and metadata.
+  Prove a small multipage site in two distinct recipes.
+- **Agent tooling:** a machine-readable catalog, skills and shared CLI/SDK operations
+  for discovery, validation, planning, preview and repair. Regeneration previews
+  changes and detects human-edit conflicts; exported source can become human-owned.
+- **Generative UI:** evaluate a Bref catalog on json-render with one interactive
+  task, preserving input and focus while invoking registered host actions. Measure
+  runtime cost before choosing a renderer and adding one optional host integration.
+
+Generation tooling and agent integrations will be optional. A visual editor,
+arbitrary application logic generation and hosted model services are deferred.
+Accessibility depends on the final composition, theme and interactions; component
+checks and generated CSS do not guarantee that every customization is accessible.
+
+## Community and contributing
+
+For questions and examples, join [Discord](https://discord.gg/JpgQRTUsVS) and use the
+`bref-ui` channel. Report bugs and suggest features through
+[GitHub Issues](https://github.com/feuersteiner/bref-ui/issues).
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
+
+## License
+
+[MIT](LICENSE).

package/src/lib/button/button.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	/* eslint-disable svelte/consistent-selector-style -- Keep the shared button/link geometry scoped to .button. */
+	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
+	import type { ButtonProps } from './types.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		color = 'foreground',
+		size = 'medium',
+		variant = 'neutral',
+		label,
+		icon,
+		trailingIcon,
+		wide = false,
+		rounded = false,
+		disabled = false,
+		href,
+		onClick,
+		class: className,
+		...attributes
+	}: ButtonProps = $props();
+
+	const isIcon = $derived(label === undefined);
+	const isLink = $derived(href !== undefined);
+	const common = $derived({
+		class: ['button', surface({ variant, color, shadow: 'small', hover: 'medium' }), className],
+		'aria-label': attributes['aria-label'] ?? (isIcon ? (icon?.label ?? icon?.name) : undefined),
+		'data-color': color,
+		'data-size': size,
+		'data-variant': variant,
+		'data-kind': isIcon ? 'icon' : 'normal',
+		'data-wide': wide && !isIcon ? '' : undefined,
+		'data-rounded': rounded && isIcon ? '' : undefined
+	});
+</script>
+
+{#snippet content()}
+	{#if icon}
+		<span><Icon {...icon} color={undefined} label={undefined} /></span>
+	{/if}
+	{#if !isIcon}
+		{label}
+		{#if trailingIcon}
+			<span><Icon {...trailingIcon} color={undefined} label={undefined} /></span>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if isLink}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -- Native library links also support consumers outside SvelteKit. -->
+	<a
+		{...attributes as HTMLAnchorAttributes}
+		{...common}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled ? true : attributes['aria-disabled']}
+		tabindex={disabled ? -1 : attributes.tabindex}
+		onclick={disabled ? (event) => event.preventDefault() : onClick}
+	>
+		{@render content()}
+	</a>
+	<!-- eslint-enable svelte/no-navigation-without-resolve -->
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		{...common}
+		type={(attributes as HTMLButtonAttributes).type ?? 'button'}
+		{disabled}
+		onclick={onClick}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.button {
+		--internal-height: max(48px, 3rem);
+		--internal-padding: 1.125rem;
+		--internal-icon-size: calc(var(--internal-height) / 2 + 0.25rem);
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: capitalize;
+		gap: 0.5rem;
+		min-height: var(--internal-height);
+		min-width: 24px;
+		padding: 0.25rem var(--internal-padding);
+		border-radius: 0.45rem;
+		font: inherit;
+		font-size: 1rem;
+		text-decoration: none;
+	}
+	.button[data-size='x-small'] {
+		--internal-height: max(28px, 1.75rem);
+		--internal-padding: 0.5rem;
+	}
+	.button[data-size='small'] {
+		--internal-height: max(40px, 2.5rem);
+		--internal-padding: 0.875rem;
+	}
+	.button[data-size='large'] {
+		--internal-height: max(64px, 4rem);
+		--internal-padding: 1.5rem;
+	}
+	.button[data-size='x-large'] {
+		--internal-height: max(80px, 5rem);
+		--internal-padding: 2rem;
+	}
+	.button[data-kind='icon'] {
+		width: var(--internal-height);
+		height: var(--internal-height);
+		padding: 0;
+		font-size: var(--internal-icon-size);
+	}
+	span {
+		display: inline-flex;
+		font-size: var(--internal-icon-size);
+	}
+	.button[data-wide] {
+		width: 100%;
+	}
+	.button[data-rounded] {
+		border-radius: 50%;
+	}
+</style>

package/src/lib/button/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "button",
+	"files": ["button.svelte"],
+	"exports": { "Button": "button.svelte" },
+	"dependencies": ["icon", "theme"]
+}

package/src/lib/button/types.ts

@@ -0,0 +1,42 @@
+import type { DOMAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Color, Size, Variant } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+
+type ButtonIconProps = Omit<IconProps, 'size' | 'color'>;
+
+interface TextButtonProps {
+	rounded?: never;
+	label: string;
+	wide?: boolean;
+	icon?: ButtonIconProps;
+	trailingIcon?: ButtonIconProps;
+}
+
+interface IconButtonProps {
+	rounded?: boolean;
+	label?: never;
+	wide?: never;
+	icon: ButtonIconProps;
+	trailingIcon?: never;
+}
+
+type HrefButtonProps = Omit<
+	HTMLAnchorAttributes,
+	keyof DOMAttributes<HTMLElement> | 'color' | 'href'
+> & {
+	href: string;
+};
+
+type ClickButtonProps = Omit<HTMLButtonAttributes, keyof DOMAttributes<HTMLElement> | 'color'> & {
+	href?: never;
+};
+
+export type ButtonProps = {
+	color?: Exclude<Color, 'background'>;
+	size?: Size;
+	variant?: Variant;
+	disabled?: boolean;
+	onClick?: DOMAttributes<HTMLButtonElement | HTMLAnchorElement>['onclick'];
+} & Omit<DOMAttributes<HTMLButtonElement | HTMLAnchorElement>, 'children' | 'onclick'> &
+	(TextButtonProps | IconButtonProps) &
+	(HrefButtonProps | ClickButtonProps);