@plures/runebook 0.4.0

package/src/lib/design-dojo/Button.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    variant?: 'primary' | 'secondary' | 'danger';
+    disabled?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    variant = 'secondary',
+    disabled = false,
+    onclick,
+    class: cls = '',
+    children
+  }: Props = $props();
+</script>
+
+<button
+  class="dd-btn dd-btn--{variant} {cls}"
+  {disabled}
+  {onclick}
+  data-tui={tui}
+>
+  {@render children?.()}
+</button>
+
+<style>
+  .dd-btn {
+    padding: var(--space-2) var(--space-3);
+    border: none;
+    border-radius: var(--radius-2);
+    cursor: pointer;
+    font-size: var(--font-size-1);
+    font-weight: 500;
+    transition: background-color var(--transition-base);
+  }
+
+  .dd-btn--primary {
+    background: var(--brand);
+    color: var(--surface-1);
+  }
+
+  .dd-btn--primary:hover:not(:disabled) {
+    filter: brightness(1.15);
+  }
+
+  .dd-btn--secondary {
+    background: var(--surface-3);
+    color: var(--text-1);
+  }
+
+  .dd-btn--secondary:hover:not(:disabled) {
+    filter: brightness(1.2);
+  }
+
+  .dd-btn--danger {
+    background: var(--error);
+    color: var(--text-1);
+  }
+
+  .dd-btn--danger:hover:not(:disabled) {
+    filter: brightness(1.15);
+  }
+
+  .dd-btn:disabled {
+    background: var(--surface-2);
+    color: var(--text-3);
+    cursor: not-allowed;
+  }
+</style>

package/src/lib/design-dojo/Input.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  interface Props {
+    tui?: boolean;
+    type?: string;
+    value?: any;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    class?: string;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    tui = false,
+    type = 'text',
+    value = $bindable(''),
+    placeholder = '',
+    min,
+    max,
+    step,
+    class: cls = '',
+    oninput,
+    onchange,
+  }: Props = $props();
+</script>
+
+<input
+  class="dd-input {cls}"
+  {type}
+  bind:value
+  {placeholder}
+  {min}
+  {max}
+  {step}
+  {oninput}
+  {onchange}
+  data-tui={tui}
+/>
+
+<style>
+  .dd-input {
+    width: 100%;
+    padding: var(--space-2);
+    background: var(--surface-1);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    color: var(--text-1);
+    font-size: var(--font-size-2);
+    box-sizing: border-box;
+  }
+
+  .dd-input:focus {
+    outline: none;
+    border-color: var(--brand);
+  }
+
+  .dd-input[type='range'] {
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+  }
+</style>

package/src/lib/design-dojo/List.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    class: cls = '',
+    children
+  }: Props = $props();
+</script>
+
+<ul class="dd-list {cls}" data-tui={tui}>
+  {@render children?.()}
+</ul>
+
+<style>
+  .dd-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    color: var(--text-1);
+    font-size: var(--font-size-1);
+  }
+
+  :global(.dd-list li) {
+    padding: var(--space-1) 0;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  :global(.dd-list li:last-child) {
+    border-bottom: none;
+  }
+</style>

package/src/lib/design-dojo/Select.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    value?: string;
+    id?: string;
+    class?: string;
+    onchange?: (e: Event) => void;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    value = '',
+    id,
+    class: cls = '',
+    onchange,
+    children
+  }: Props = $props();
+</script>
+
+<select
+  class="dd-select {cls}"
+  {value}
+  {id}
+  {onchange}
+  data-tui={tui}
+>
+  {@render children?.()}
+</select>
+
+<style>
+  .dd-select {
+    width: 100%;
+    padding: var(--space-2);
+    background: var(--surface-1);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    color: var(--text-1);
+    font-size: var(--font-size-1);
+  }
+
+  .dd-select:focus {
+    outline: none;
+    border-color: var(--brand);
+  }
+</style>

package/src/lib/design-dojo/SplitPane.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    left,
+    right,
+    children
+  }: Props = $props();
+</script>
+
+<div class="dd-split-pane" data-tui={tui}>
+  {#if left || right}
+    <div class="dd-split-pane__left">{@render left?.()}</div>
+    <div class="dd-split-pane__right">{@render right?.()}</div>
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>
+
+<style>
+  .dd-split-pane {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .dd-split-pane__left {
+    flex-shrink: 0;
+  }
+
+  .dd-split-pane__right {
+    flex: 1;
+    overflow: hidden;
+  }
+</style>

package/src/lib/design-dojo/StatusBar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    width?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    position = 'left',
+    width = '200px',
+    class: cls = '',
+    children
+  }: Props = $props();
+
+  const isVertical = $derived(position === 'left' || position === 'right');
+  const sizeStyle = $derived(isVertical ? `width: ${width}` : `height: ${width}`);
+  const positionStyle = $derived(
+    position === 'left'   ? 'left: 0; top: 0; bottom: 0;' :
+    position === 'right'  ? 'right: 0; top: 0; bottom: 0;' :
+    position === 'top'    ? 'top: 0; left: 0; right: 0;' :
+                            'bottom: 0; left: 0; right: 0;'
+  );
+</script>
+
+<aside
+  class="dd-status-bar {cls}"
+  style="{sizeStyle}; {positionStyle}"
+  data-position={position}
+  data-tui={tui}
+>
+  {@render children?.()}
+</aside>
+
+<style>
+  .dd-status-bar {
+    position: fixed;
+    background: var(--surface-2);
+    border-right: 1px solid var(--border-color);
+    overflow-y: auto;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dd-status-bar[data-position='top'],
+  .dd-status-bar[data-position='bottom'] {
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    flex-direction: row;
+  }
+
+  .dd-status-bar[data-position='right'] {
+    border-right: none;
+    border-left: 1px solid var(--border-color);
+  }
+</style>

package/src/lib/design-dojo/Table.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    class: cls = '',
+    children
+  }: Props = $props();
+</script>
+
+<table class="dd-table {cls}" data-tui={tui}>
+  {@render children?.()}
+</table>
+
+<style>
+  .dd-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface-1);
+    border-radius: var(--radius-2);
+    font-size: var(--font-size-1);
+    color: var(--text-1);
+  }
+
+  :global(.dd-table th) {
+    background: var(--surface-2);
+    font-weight: 600;
+    padding: var(--space-2);
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  :global(.dd-table td) {
+    padding: var(--space-2);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  :global(.dd-table tr:last-child td) {
+    border-bottom: none;
+  }
+</style>

package/src/lib/design-dojo/Text.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    tui?: boolean;
+    mono?: boolean;
+    variant?: 1 | 2 | 3;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    tui = false,
+    mono = false,
+    variant = 1,
+    class: cls = '',
+    children
+  }: Props = $props();
+</script>
+
+<span
+  class="dd-text dd-text--{variant} {mono ? 'dd-text--mono' : ''} {cls}"
+  data-tui={tui}
+>
+  {@render children?.()}
+</span>
+
+<style>
+  .dd-text--1 { color: var(--text-1); }
+  .dd-text--2 { color: var(--text-2); }
+  .dd-text--3 { color: var(--text-3); }
+
+  .dd-text--mono {
+    font-family: var(--font-mono);
+  }
+</style>

package/src/lib/design-dojo/Toggle.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface Props {
+    tui?: boolean;
+    checked?: boolean;
+    label?: string;
+    class?: string;
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    tui = false,
+    checked = $bindable(false),
+    label = '',
+    class: cls = '',
+    onchange,
+  }: Props = $props();
+</script>
+
+<label class="dd-toggle {cls}" data-tui={tui}>
+  <input
+    type="checkbox"
+    bind:checked
+    {onchange}
+    class="dd-toggle__input"
+  />
+  {#if label}<span class="dd-toggle__label">{label}</span>{/if}
+</label>
+
+<style>
+  .dd-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    color: var(--text-1);
+  }
+
+  .dd-toggle__input {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--brand);
+  }
+
+  .dd-toggle__label {
+    font-size: var(--font-size-2);
+  }
+</style>

package/src/lib/design-dojo/index.ts

@@ -0,0 +1,10 @@
+export { default as Box } from './Box.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as StatusBar } from './StatusBar.svelte';
+export { default as List } from './List.svelte';