@stacksjs/components 0.2.110 → 0.2.112

package/dist/{Sidebar-4hn7vw4n.stx → Sidebar-bg47fqmq.stx}

@@ -29,7 +29,9 @@ export const className = $props.className || ''
 export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36).slice(2, 8)}`
 
 const themeStyle = resolveSidebarTheme(theme)
+export const selectionModel = themeStyle.selection
 export const hasShimmerRim = themeStyle.layers.shimmerRim === true
+export const isFrosted = themeStyle.layers.frosted === true
 export const tintClasses = themeStyle.layers.tint || ''
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -277,6 +279,24 @@ function toggleCollapse() {
 // root element unless the app manages its own theme (data-theme attribute).
 // ---------------------------------------------------------------------------
 
+// ---------------------------------------------------------------------------
+// Key-window tracking — AppKit dims a source-list selection from the accent
+// to a neutral fill the moment the window resigns key. `data-window-key` on
+// the pane drives the two selection rule sets in the scoped CSS above.
+// ---------------------------------------------------------------------------
+
+function trackKeyWindow() {
+  // Driven by real focus/blur events only — never by an initial
+  // `document.hasFocus()` reading. A freshly loaded page, a background tab
+  // that has not been clicked yet, and an embedded webview that does not
+  // report focus at all all answer `false`, which would open the sidebar in
+  // the dimmed non-key state and leave it there. Starting from the key state
+  // and reacting to an actual blur keeps the default correct everywhere and
+  // still dims exactly when AppKit would.
+  window.addEventListener('focus', () => pane.setAttribute('data-window-key', 'true'))
+  window.addEventListener('blur', () => pane.setAttribute('data-window-key', 'false'))
+}
+
 function followSystemAppearance() {
   const media = window.matchMedia('(prefers-color-scheme: dark)')
   function sync() {
@@ -292,6 +312,7 @@ onMount(() => {
   if (!pane) return
 
   followSystemAppearance()
+  trackKeyWindow()
 
   if (persistKeyProp) {
     try {
@@ -321,6 +342,9 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   id="{{ sidebarUid }}"
   data-stx-sidebar
   data-sidebar-theme="{{ theme }}"
+  data-sidebar-selection="{{ selectionModel }}"
+  @if(isFrosted)data-sidebar-frosted@endif
+  data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
   :style="`width: ${sidebarWidth()}`"
@@ -430,10 +454,83 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   .stx-sidebar-rim::after { animation: none; }
 }
 
-/* Rows collapse like AppKit outlines: fixed row height animates to zero. */
+/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
+   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
+   did not survive class extraction in the stx dev server, leaving the pane
+   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
+   its brackets on the way to the generator, was read as a percentage, and
+   compiled to `saturate(0.017)`, which drained the colour out of the whole
+   backdrop. In a Craft window with webSidebarMaterial the native
+   NSVisualEffectView supplies the real vibrancy; this approximates it
+   everywhere else. */
+[data-sidebar-frosted] {
+  -webkit-backdrop-filter: saturate(180%) blur(50px);
+  backdrop-filter: saturate(180%) blur(50px);
+}
+
+/* ---------------------------------------------------------------------------
+ * Selection, `accent` model (macOS and its derivatives).
+ *
+ * AppKit paints a source-list selection in two states. In a key window the
+ * row takes the system accent and its label, icon, count and disclosure
+ * chevron all turn white; the label also goes semibold. When the window
+ * resigns key the fill drops to a neutral gray and the label stays dark.
+ * Measured from Mail.app: key fill is the accent, non-key fill sits about
+ * 5.5% black over the pane, and the icons desaturate to secondary gray.
+ *
+ * These are attribute rules rather than utility classes because the row's
+ * children have to recolor together, and because the controller toggles
+ * `data-active` on the client — CSS keyed on the attribute keeps the
+ * previously selected row's own icon tint intact when selection moves.
+ * ------------------------------------------------------------------------- */
+[data-sidebar-selection="accent"] {
+  --stx-sidebar-accent: #007aff;
+  --stx-sidebar-selection-idle: rgba(0, 0, 0, 0.055);
+  --stx-sidebar-on-selection: #fff;
+  --stx-sidebar-icon-idle: #8e8e93;
+}
+@media (prefers-color-scheme: dark) {
+  [data-sidebar-selection="accent"] {
+    --stx-sidebar-accent: #0a84ff;
+    --stx-sidebar-selection-idle: rgba(255, 255, 255, 0.11);
+    --stx-sidebar-icon-idle: #98989d;
+  }
+}
+
+/* Per-item tint, published by SidebarItem as a custom property. */
+[data-sidebar-selection="accent"] [data-sidebar-icon] {
+  color: var(--stx-sidebar-icon, currentColor);
+}
+
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] {
+  background: var(--stx-sidebar-accent);
+  color: var(--stx-sidebar-on-selection);
+  font-weight: 590;
+}
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-icon],
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-count],
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-chevron] {
+  color: var(--stx-sidebar-on-selection);
+}
+/* Hover must not lighten the selected row out from under the accent. */
+[data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"]:hover {
+  background: var(--stx-sidebar-accent);
+}
+
+/* Window resigned key: neutral fill, label stays dark, icons desaturate. */
+[data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-item][data-active="true"] {
+  background: var(--stx-sidebar-selection-idle);
+  font-weight: 590;
+}
+[data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-icon] {
+  color: var(--stx-sidebar-icon-idle);
+}
+
+/* Rows collapse like AppKit outlines: fixed row height animates to zero.
+   The 32px pitch is the row itself — AppKit leaves no gap, so a run of
+   selected or hovered rows reads as one continuous block. */
 [data-sidebar-row] {
-  height: 32px; /* 30px row + 2px gap */
-  padding-bottom: 2px;
+  height: 32px;
   transition: height 0.22s ease, opacity 0.16s ease;
 }
 [data-sidebar-row][data-collapsed] {

package/dist/{SidebarItem-gtrcw4ky.stx → SidebarItem-9rvbwhxr.stx}

@@ -36,8 +36,12 @@ export const countClasses = themeStyle.count
 // Nested rows are indented; the icon tint accepts macOS system color names
 // ("blue", "yellow", …) or any CSS color.
 export const indentStyle = depth > 0 ? `padding-left: ${depth * themeStyle.indentPerLevel}px` : ''
+// The tint is published as a custom property rather than `color:` directly.
+// An inline `color` would outrank any stylesheet rule, so a selected row
+// could never turn its icon white the way AppKit does, and toggling
+// selection on the client could not restore the original tint afterwards.
 const tint = resolveIconColor(iconColor)
-export const iconStyle = tint ? `color: ${tint}` : ''
+export const iconStyle = tint ? `--stx-sidebar-icon: ${tint}` : ''
 export const isLink = Boolean(href) && !disabled
 </script>
 
@@ -52,34 +56,34 @@ export const isLink = Boolean(href) && !disabled
     <a href="{{ href }}" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif>
       <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>
         @if(expandable)
-          <span class="{{ chevronClasses }}" aria-hidden="true"></span>
+          <span data-sidebar-chevron class="{{ chevronClasses }}" aria-hidden="true"></span>
         @endif
       </span>
       @if(image)
         <span class="{{ iconSlotClasses }}"><img src="{{ image }}" alt="" class="{{ imageClasses }}" /></span>
       @elseif(icon)
-        <span class="{{ iconSlotClasses }}"><span class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
+        <span class="{{ iconSlotClasses }}"><span data-sidebar-icon class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
       @endif
       <span class="{{ labelClasses }}">{{ label }}</span>
       @if(count !== '' && count !== null && count !== undefined)
-        <span class="{{ countClasses }}">{{ count }}</span>
+        <span data-sidebar-count class="{{ countClasses }}">{{ count }}</span>
       @endif
     </a>
   @else
     <button type="button" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif @if(disabled)data-disabled disabled aria-disabled="true"@endif>
       <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>
         @if(expandable)
-          <span class="{{ chevronClasses }}" aria-hidden="true"></span>
+          <span data-sidebar-chevron class="{{ chevronClasses }}" aria-hidden="true"></span>
         @endif
       </span>
       @if(image)
         <span class="{{ iconSlotClasses }}"><img src="{{ image }}" alt="" class="{{ imageClasses }}" /></span>
       @elseif(icon)
-        <span class="{{ iconSlotClasses }}"><span class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
+        <span class="{{ iconSlotClasses }}"><span data-sidebar-icon class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
       @endif
       <span class="{{ labelClasses }}">{{ label }}</span>
       @if(count !== '' && count !== null && count !== undefined)
-        <span class="{{ countClasses }}">{{ count }}</span>
+        <span data-sidebar-count class="{{ countClasses }}">{{ count }}</span>
       @endif
     </button>
   @endif

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-i52o1Y/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-i52o1Y/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-i52o1Y/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-i52o1Y/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1132,13 +1132,13 @@ var RadioGroupOption_default = "./RadioGroupOption-s1d6r221.stx";
 // src/ui/select/Select.stx
 var Select_default = "./Select-1vnd0brz.stx";
 // src/ui/sidebar/Sidebar.stx
-var Sidebar_default = "./Sidebar-4hn7vw4n.stx";
+var Sidebar_default = "./Sidebar-bg47fqmq.stx";
 // src/ui/sidebar/SidebarFooter.stx
 var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
 // src/ui/sidebar/SidebarHeader.stx
 var SidebarHeader_default = "./SidebarHeader-ed5wb13t.stx";
 // src/ui/sidebar/SidebarItem.stx
-var SidebarItem_default = "./SidebarItem-gtrcw4ky.stx";
+var SidebarItem_default = "./SidebarItem-9rvbwhxr.stx";
 // src/ui/sidebar/SidebarSection.stx
 var SidebarSection_default = "./SidebarSection-qf8fhy55.stx";
 // src/ui/sidebar/themes.ts
@@ -1158,13 +1158,14 @@ var macosColors = {
 };
 var macos = {
   pane: [
-    "bg-white/55 dark:bg-[#1e1e23]/55",
-    "backdrop-blur-[60px] backdrop-saturate-[1.8]",
+    "bg-[#f2f2f4]/90 dark:bg-[#1c1c1e]/88",
     "text-black dark:text-white",
     "select-none"
   ].join(" "),
+  selection: "accent",
   layers: {
-    shimmerRim: true
+    shimmerRim: true,
+    frosted: true
   },
   scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]",
   sectionHeader: [
@@ -1179,18 +1180,18 @@ var macos = {
     "opacity-0 group-hover/section:opacity-100 transition-opacity duration-150",
     "transition-transform duration-200"
   ].join(" "),
-  sectionGroup: "flex flex-col gap-[2px]",
+  sectionGroup: "flex flex-col",
   item: {
     base: [
       "flex w-full items-center",
-      "h-[30px] rounded-[9px] pl-[4px] pr-[8px]",
+      "h-[32px] rounded-[8px] pl-[4px] pr-[8px]",
       "text-[13px] leading-[16px] font-normal",
       "text-black dark:text-white",
       "transition-colors duration-150 ease-out",
       "cursor-default"
     ].join(" "),
     hover: "hover:bg-black/4 dark:hover:bg-white/6",
-    active: "bg-black/8 dark:bg-white/14",
+    active: "",
     pressed: "active:bg-black/10 dark:active:bg-white/18",
     disabled: "opacity-40 pointer-events-none",
     disclosure: "flex h-[16px] w-[18px] shrink-0 items-center justify-center",
@@ -1212,6 +1213,7 @@ var macos = {
   }
 };
 var workspace = {
+  selection: "classes",
   pane: "bg-[#f4f4f3] dark:bg-neutral-950 text-zinc-950 dark:text-white select-none",
   layers: {},
   scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-5 py-5",
@@ -1235,6 +1237,7 @@ var workspace = {
   }
 };
 var desktop = {
+  selection: "classes",
   pane: "bg-[#f3f3f1]/48 dark:bg-neutral-950/32 backdrop-blur-3xl backdrop-saturate-150 text-zinc-950 dark:text-white select-none",
   layers: {
     tint: "bg-[linear-gradient(112deg,rgba(255,255,255,0.20)_0%,rgba(255,255,255,0.04)_45%,rgba(226,226,222,0.16)_100%)] dark:bg-[linear-gradient(112deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.06)_100%)]"

package/dist/ui/sidebar/themes.d.ts

@@ -13,11 +13,22 @@ export declare function resolveIconColor(color?: string): string | undefined;
  *
  * The flagship theme is `macos` — a faithful recreation of the sidebar in
  * the latest macOS (Tahoe, macOS 26/27 "Liquid Glass"). Its metrics were
- * measured from native apps (Mail, Music, Notes) at @2x:
+ * measured pixel-by-pixel from Mail.app's source list at @2x:
  *
- *   row pitch 32px = 30px row + 2px gap · highlight radius 9px
- *   label 13px · count 13px secondary gray · section header 11px semibold
+ *   row pitch 32px, and the highlight fills the whole 32px — AppKit leaves
+ *     no gap between rows, so consecutive selected/hovered rows touch
+ *   highlight radius 8px
+ *   label 13px · count 13px secondary gray · section header 11px semibold,
+ *     Title Case (NOT uppercase — uppercasing section headers is the single
+ *     most common tell of a web sidebar imitating macOS)
  *   icon 17px in a fixed 22px slot · disclosure gutter 18px · child indent 16px
+ *   pane 234px wide, #f1f2f3 in light appearance, ~90% opaque so the
+ *     backdrop bleeds through faintly rather than tinting the pane
+ *
+ * Selection follows AppKit's two-state model (`selection` below): in a key
+ * window the row takes the system accent with a white label, icon and count;
+ * when the window resigns key it falls back to a neutral fill with the label
+ * left dark. Icons desaturate to gray in the same non-key state.
  *
  * Legacy themes (`workspace`, `desktop`, `solid`, `transparent`, `vibrancy`)
  * are preserved verbatim from the previous variant maps. `tahoe` now aliases
@@ -46,8 +57,10 @@ export declare const sidebarThemes: {
 /** Class groups a sidebar theme provides. All values are utility classes. */
 export declare interface SidebarTheme {
   pane: string
+  selection: SidebarSelectionModel
   layers: {
     shimmerRim?: boolean
+    frosted?: boolean
     tint?: string
   }
   scrollArea: string
@@ -71,4 +84,14 @@ export declare interface SidebarTheme {
   }
 }
 export type MacosColor = keyof typeof macosColors;
+/**
+ * How a theme paints the selected row.
+ *
+ * `accent` reproduces AppKit: the pane owns CSS custom properties for the
+ * key/non-key fills, and scoped rules recolor the row's label, icon, count
+ * and chevron together. `classes` is the older utility-class model, where
+ * `item.active` is simply added to the row element and children are left
+ * alone. Legacy themes stay on `classes` so they render exactly as before.
+ */
+export type SidebarSelectionModel = 'accent' | 'classes';
 export type SidebarThemeName = keyof typeof sidebarThemes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.110",
+  "version": "0.2.112",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -47,6 +47,7 @@
   "files": [
     "README.md",
     "dist",
+    "src",
     "stx-plugin.ts"
   ],
   "scripts": {
@@ -62,8 +63,8 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.6",
-    "@stacksjs/stx": "0.2.110",
-    "bun-plugin-stx": "0.2.110",
+    "@stacksjs/stx": "0.2.112",
+    "bun-plugin-stx": "0.2.112",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/components/CodeBlock.stx

@@ -0,0 +1,54 @@
+<script server>
+import { applyHeadwindClasses, highlight } from '../utils/highlighter'
+
+export const code = $props.code || ''
+export const language = $props.language || 'typescript'
+export const theme = $props.theme || 'auto'
+export const lineNumbers = $props.lineNumbers !== false
+export const copyable = $props.copyable !== false
+export const className = $props.className || ''
+
+const result = await highlight(code, { language, theme, lineNumbers })
+export const highlightedCode = applyHeadwindClasses(result.html, className)
+</script>
+
+<script client>
+const code = {{ code }}
+const copied = state(false)
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(code)
+    copied.set(true)
+    setTimeout(() => copied.set(false), 2000)
+  }
+  catch (err) {
+    console.error('Failed to copy code:', err)
+  }
+}
+</script>
+
+<div class="relative group">
+  {!! highlightedCode !!}
+
+  @if(copyable)
+    <button
+      @click="copyToClipboard()"
+      class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-white text-xs rounded-md font-medium"
+      aria-label="Copy code"
+    >
+      <span :show="copied()" class="flex items-center gap-1.5">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+        Copied!
+      </span>
+      <span :show="!copied()" class="flex items-center gap-1.5">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+        Copy
+      </span>
+    </button>
+  @endif
+</div>

package/src/components/Footer.stx

@@ -0,0 +1,66 @@
+<script server>
+export const author = $props.author || '@chrisbbreuer'
+export const authorUrl = $props.authorUrl || 'https://github.com/chrisbbreuer'
+export const project = $props.project || '@stacksjs'
+export const projectUrl = $props.projectUrl || 'https://github.com/stacksjs/stacks'
+export const twitterUrl = $props.twitterUrl || 'https://twitter.com/chrisbbreuer'
+export const sponsorUrl = $props.sponsorUrl || 'https://github.com/sponsors/chrisbbreuer'
+export const coffeeUrl = $props.coffeeUrl || 'https://www.buymeacoffee.com/xlbd'
+
+export const currentYear = new Date().getFullYear()
+</script>
+
+<footer class="flex items-center justify-center mt-16 w-full pb-4 text-neutral-600 dark:text-neutral-400 opacity-60">
+  <div class="flex flex-col items-center justify-center">
+    <p class="text-sm">
+      With 💙 by
+      <a href="{{ authorUrl }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+        {{ author }}
+      </a>
+      &
+      <a href="{{ projectUrl }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+        {{ project }}
+      </a>
+      <span> © {{ currentYear }}</span>
+    </p>
+
+    <div class="mt-2 flex flex-col items-center sm:flex-row space-x-1 space-y-2 sm:space-y-0">
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ twitterUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Follow me on Twitter
+          </a>
+        </span>
+      </div>
+
+      <span class="hidden px-2 text-neutral-400 sm:block">|</span>
+
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.16 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ coffeeUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Buy me a coffee
+          </a>
+        </span>
+      </div>
+
+      <span class="hidden px-2 text-neutral-400 sm:block">|</span>
+
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ sponsorUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Sponsor me on GitHub
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</footer>

package/src/components/Hero.stx

@@ -0,0 +1,25 @@
+<script server>
+export const title = $props.title || 'Component'
+export const description = $props.description || 'A modern component built with STX'
+export const githubUrl = $props.githubUrl || '#'
+</script>
+
+<div class="flex flex-col items-center gap-3">
+  <h1 class="text-5xl font-bold mb-3 -mt-5 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+    {{ title }}
+  </h1>
+  <p class="mb-3 mt-0 text-lg text-neutral-600 dark:text-neutral-400">
+    {{ description }}
+  </p>
+  <div class="flex gap-2">
+    <slot name="demo" />
+    <a
+      href="{{ githubUrl }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-flex items-center justify-center h-10 px-8 rounded-md text-sm font-semibold bg-gradient-to-b from-white to-neutral-100 dark:from-neutral-800 dark:to-neutral-900 text-neutral-900 dark:text-white shadow-md hover:shadow-lg transition-all duration-200"
+    >
+      GitHub
+    </a>
+  </div>
+</div>

package/src/components/Installation.stx

@@ -0,0 +1,37 @@
+<script server>
+export const packageName = $props.packageName || '@stacksjs/component'
+export const installCode = `bun add ${packageName}`
+export const npmCode = `npm install ${packageName}`
+export const pnpmCode = `pnpm add ${packageName}`
+export const yarnCode = `yarn add ${packageName}`
+</script>
+
+<div class="installation">
+  <h2 class="my-2 text-lg font-semibold">Installation</h2>
+
+  <p class="my-3 text-base">
+    Install the component using your preferred package manager:
+  </p>
+
+  <div class="space-y-4">
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">Bun (recommended)</h3>
+      <CodeBlock :code="installCode" language="bash" />
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">npm</h3>
+      <CodeBlock :code="npmCode" language="bash" />
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">pnpm</h3>
+      <CodeBlock :code="pnpmCode" language="bash" />
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">Yarn</h3>
+      <CodeBlock :code="yarnCode" language="bash" />
+    </div>
+  </div>
+</div>

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as CodeBlock } from './CodeBlock.stx'
+export { default as Footer } from './Footer.stx'
+export { default as Hero } from './Hero.stx'
+export { default as Installation } from './Installation.stx'

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+export * from './useCopyCode'
+export * from './useDarkMode'
+export * from './useSEO'
+export * from './utilities'

package/src/composables/useCopyCode.ts

@@ -0,0 +1,73 @@
+/**
+ * Copy code to clipboard with visual feedback
+ */
+export interface CopyCodeOptions {
+  code: string
+  onSuccess?: () => void
+  onError?: (error: Error) => void
+  timeout?: number
+}
+
+export interface CopyCodeResult {
+  copied: boolean
+  copy: () => Promise<void>
+  reset: () => void
+}
+
+export function useCopyCode(options: CopyCodeOptions): CopyCodeResult {
+  const { code, onSuccess, onError, timeout = 2000 } = options
+
+  let copied = false
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  const reset = () => {
+    copied = false
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  const copy = async () => {
+    try {
+      if (!navigator.clipboard) {
+        throw new Error('Clipboard API not available')
+      }
+
+      await navigator.clipboard.writeText(code)
+      copied = true
+      onSuccess?.()
+
+      // Auto-reset after timeout
+      timeoutId = setTimeout(() => {
+        copied = false
+        timeoutId = null
+      }, timeout)
+    }
+    catch (error) {
+      const err = error instanceof Error ? error : new Error('Failed to copy code')
+      onError?.(err)
+      console.error('Failed to copy code:', err)
+    }
+  }
+
+  return {
+    copied,
+    copy,
+    reset,
+  }
+}
+
+/**
+ * Simple synchronous copy function for direct use
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  }
+  catch (error) {
+    console.error('Failed to copy to clipboard:', error)
+    return false
+  }
+}