feat(ui): build remaining component scaffolds

packages/ui/components/Clipboard.wrn

@@ -1,25 +1,97 @@
 component Clipboard {
   outputs {
-    copy(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
-    success(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
-    error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)
+    copy(payload: { value: string; sourceEvent?: Event })
+    success(payload: { value: string; sourceEvent?: Event })
+    error(payload: { error: Error | string; value: string; sourceEvent?: Event })
   }
 
   props {
-size: string = "default"
-    color: string = "primary"
+    value: string = ""
+    label: string = "Copy"
+    copiedLabel: string = "Copied"
+    errorLabel: string = "Copy failed"
     title: string = "Clipboard"
     description: string = ""
-    items: unknown[] = []
-    variant: string = "default"
+    code: boolean = true
+    size: string = "default"
+    color: string = "primary"
+    disabled: boolean = false
     class: string = ""
   }
+
+  state status = "idle"
+
+  functions {
+    client function resetStatus() { status = "idle" }
+    client function copySucceeded() {
+      status = "success"
+      output.success({ value: value })
+      setTimeout(resetStatus, 1600)
+    }
+    client function copyFailed(error) {
+      status = "error"
+      output.error({ error: error, value: value })
+      setTimeout(resetStatus, 1600)
+    }
+    client function copyValue(sourceEvent) {
+      if (disabled || status === "copying") {
+        return
+      }
+      status = "copying"
+      output.copy({ value: value, sourceEvent: sourceEvent })
+      if (!window.navigator.clipboard || !window.navigator.clipboard.writeText) {
+        copyFailed(new Error("Clipboard API is unavailable"))
+        return
+      }
+      return window.navigator.clipboard.writeText(value).then(copySucceeded).catch(copyFailed)
+    }
+  }
+
   view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--clipboard wire-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+    <section
+      {...attrs}
+      data-ui-component="Clipboard"
+      data-status='{status}'
+      data-size='{size}'
+      data-color='{color}'
+      class='wire-clipboard {class}'
+    >
+      {#if title}<strong class="wire-clipboard__title">{title}</strong>{/if}
+      {#if description}<p class="wire-clipboard__description">{description}</p>{/if}
+      <div class="wire-clipboard__control">
+        {#if code}
+          <code class="wire-clipboard__value">{value}</code>
+        {:else}
+          <span class="wire-clipboard__value">{value}</span>
+        {/if}
+        <button
+          type="button"
+          class="wire-clipboard__button"
+          disabled='{disabled}'
+          aria-label='{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}'
+          @click='copyValue(event)'
+        >
+          <span class="icon-[lucide--copy] wire-clipboard__icon" data-show='status !== "success"' aria-hidden="true"></span>
+          <span class="icon-[lucide--check] wire-clipboard__icon" data-show='status === "success"' aria-hidden="true"></span>
+          <span>{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}</span>
+        </button>
+      </div>
       <slot />
     </section>
   }
+
+  style {
+    .wire-clipboard { display: grid; gap: 0.5rem; color: var(--wire-color-text); }
+    .wire-clipboard__title { font-size: 0.875rem; }
+    .wire-clipboard__description { margin: 0; color: var(--wire-color-muted); font-size: 0.8rem; }
+    .wire-clipboard__control { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius); background: var(--wire-color-surface); box-shadow: var(--wire-shadow-1); }
+    .wire-clipboard__value { min-width: 0; flex: 1; overflow: auto; padding: 0.7rem 0.85rem; color: var(--wire-color-text); background: var(--wire-color-surface-2); font: inherit; font-family: var(--wire-font-mono, ui-monospace, monospace); white-space: nowrap; }
+    .wire-clipboard__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 0; border-left: 1px solid var(--wire-color-border); color: var(--wire-color-primary); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
+    .wire-clipboard__button:hover { background: var(--wire-color-primary-soft); }
+    .wire-clipboard__button:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: -3px; }
+    .wire-clipboard__button:disabled { cursor: not-allowed; opacity: 0.55; }
+    .wire-clipboard[data-status="success"] .wire-clipboard__button { color: var(--wire-color-success); }
+    .wire-clipboard[data-status="error"] .wire-clipboard__button { color: var(--wire-color-danger); }
+    .wire-clipboard__icon { width: 1rem; height: 1rem; flex: none; }
+  }
 }