@firsthandjs/styled 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Firsthand contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,178 @@
+# @firsthandjs/styled
+
+styled-components' API, on a framework that renders once.
+
+**Documentation:** [guide](https://github.com/firsthandjs/firsthand/blob/main/docs/guide/07-styling.md) · [API reference](https://github.com/firsthandjs/firsthand/blob/main/docs/reference/styled.md) · [all docs](https://github.com/firsthandjs/firsthand/blob/main/docs/README.md)
+
+```
+npm install @firsthandjs/styled
+```
+
+1.97 kB gzip, against styled-components v6's 13.03 kB with React already
+external — both measured the same way, by bundling the package with its peers
+excluded. It needs no React, and no preprocessor.
+
+```tsx
+import { styled, css, ThemeContext } from '@firsthandjs/styled';
+
+const Button = styled.button<{ $primary?: boolean }>`
+  padding: 0.5rem 1rem;
+  border: 1px solid ${(props) => props.theme.line};
+  background: ${(props) => (props.$primary === true ? 'rebeccapurple' : 'transparent')};
+  border-radius: 4px;
+
+  &:hover {
+    filter: brightness(1.15);
+  }
+
+  @media (min-width: 40rem) {
+    padding: 0.5rem 1.5rem;
+  }
+`;
+
+<Button $primary onClick={save}>
+  Save
+</Button>;
+```
+
+## What is different, and why it is faster
+
+styled-components has one mechanism: resolve the template against the props,
+hash the result, insert a class, put it on the element. Every distinct prop
+value is a new rule. A table with a colour per row produces a rule per row.
+
+Here, the template is read **once, when you write it**, and each interpolation
+is classified by where it sits:
+
+| Where it sits                           | What it becomes       | What a change costs       |
+| --------------------------------------- | --------------------- | ------------------------- |
+| A declaration's value — `color: ${…};`  | A CSS custom property | One `setProperty`         |
+| Anywhere else — `${(p) => p.x && css…}` | Part of the class     | A class swap, rule reused |
+
+So this:
+
+```tsx
+const Row = styled.div<{ $hue: number }>`
+  color: hsl(${(props) => props.$hue} 70% 50%);
+`;
+```
+
+produces **one** rule for a thousand rows with a thousand different hues. The
+test suite asserts exactly that, and the browser check in
+[`integrations/interop`](../../integrations/interop) asserts it again on a real
+page.
+
+Blocks still work the way you expect, because nothing else can express them:
+
+```tsx
+const Button = styled.button<{ $on?: boolean }>`
+  padding: 1rem;
+  ${(props) =>
+    props.$on === true &&
+    css`
+      background: purple;
+      color: white;
+    `}
+`;
+```
+
+Two instances that resolve the same way share one rule, and switching back to a
+resolution already in the sheet reuses it.
+
+## Nesting
+
+`&:hover`, `@media`, `& > li` — all of it is **native CSS nesting**, which
+every browser this framework supports has. There is no preprocessor in this
+package, which is most of why it is 1.97 kB rather than 13.
+
+## Props
+
+A prop reaches the element if the element has it: `disabled` does, `primary`
+does not. `data-*`, `aria-*`, `role`, `style` and event handlers are forwarded
+too, and a `$`-prefixed prop never is — styled-components' transient-prop
+convention, and the reason it exists.
+
+```tsx
+<Button $primary disabled data-role="save" onClick={save} />
+// disabled, data-role and the handler land on the <button>; $primary does not.
+```
+
+styled-components answers this question with a list of every valid HTML
+attribute. The element already knows.
+
+## Theme
+
+```tsx
+const theme = signal({ line: '#d8d8e0' });
+provide(ThemeContext, theme); // a cell, so it can be swapped
+
+const Panel = styled.section`
+  border: 1px solid ${(props) => props.theme.line};
+`;
+```
+
+A theme swap is one signal write. It updates the custom properties that read
+the theme — not the components, and not the rules that never mentioned it.
+`useTheme()` reads it directly.
+
+## The rest of the API
+
+```tsx
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const GlobalStyle = createGlobalStyle`
+  body { background: ${(props) => props.theme.background}; }
+`;
+
+const Fancy = styled(Link)`
+  color: rebeccapurple;
+`;
+```
+
+`styled(Component)` hands the class to the component as a `class` prop, and the
+component is responsible for putting it on its root — the same contract
+styled-components has with `className`. Every interpolation resolves into the
+class there, because the element belongs to that component and there is nothing
+to set a custom property on.
+
+## Deliberately missing
+
+- **`.attrs()`** — write the default in the component instead.
+- **`shouldForwardProp`** — the `$` convention and "does the element have it"
+  cover the cases it exists for.
+- **A preprocessor.** No autoprefixing, no `&` rewriting: the browser does
+  nesting, and prefixes are for browsers this framework does not support.
+- **SSR collection.** There is no server rendering to collect for.
+
+## Restyling, and a typed theme
+
+A styled component can be styled again, to any depth. Both classes land on the
+element and the **outer** declaration wins — each level repeats its class in
+the selector, so specificity decides rather than which rule reached the sheet
+first.
+
+```tsx
+const Panel = styled.section`
+  padding: 1rem;
+`;
+const AccentPanel = styled(Panel)`
+  padding: 1.25rem;
+`; // wins
+```
+
+Declare the theme once and every interpolation is typed:
+
+```ts
+// The empty import matters: a file may only augment a module it imports.
+import type {} from '@firsthandjs/styled';
+
+declare module '@firsthandjs/styled' {
+  interface FirsthandTheme {
+    background: string;
+    text: string;
+  }
+}
+```

package/dist/css.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Reading a tagged template once, so that instances do not re-read it.
+ *
+ * A template is compiled the first time it is written, never per instance and
+ * never per update. What compilation decides is *where* each interpolation
+ * sits, because that decides what it costs at runtime:
+ *
+ * - a value position — `color: ${…};` — becomes a CSS custom property. Every
+ *   instance shares one class, and a change is one `setProperty` call.
+ * - anything else — `${(p) => p.big && css`…`}` — is a block, and blocks are
+ *   resolved into a class per distinct result, the way styled-components does
+ *   it for everything.
+ *
+ * The split matters at scale: a thousand rows with a colour each produce one
+ * rule here and a thousand rules in a library that cannot tell the difference.
+ */
+/** What a `css` template is before anything reads it. */
+export interface CssFragment {
+    readonly strings: readonly string[];
+    readonly values: readonly unknown[];
+}
+/**
+ * A reusable piece of CSS.
+ *
+ * Composes into another template, and may be returned from an interpolation
+ * function — which is how a conditional block is written.
+ */
+export declare function css(strings: TemplateStringsArray, ...values: unknown[]): CssFragment;
+export declare function isFragment(value: unknown): value is CssFragment;
+/** An interpolation that has to be evaluated per instance. */
+export interface Slot {
+    /** `value` becomes a custom property; `block` becomes part of a class. */
+    readonly kind: 'value' | 'block';
+    /** The custom property's name, for a value slot. */
+    readonly property: string;
+    readonly fn: (props: Record<string, unknown>) => unknown;
+}
+export interface Compiled {
+    /**
+     * The template as literal text and block slots, in order.
+     *
+     * Value slots are already `var(…)` inside the literal chunks; a block slot
+     * appears as itself, because its text is only known per instance.
+     */
+    readonly chunks: readonly (string | Slot)[];
+    readonly slots: readonly Slot[];
+    /** True when nothing has to be resolved per instance. */
+    readonly static: boolean;
+}
+/**
+ * Flattens a fragment into text plus the slots that could not be resolved.
+ *
+ * Nested fragments are inlined, so a mixin costs nothing at runtime unless it
+ * contains a function of its own.
+ */
+export declare function compile(fragment: CssFragment, id: string, values?: boolean): Compiled;
+/** Joins the compiled chunks, asking for each block slot's text. */
+export declare function join(compiled: Compiled, resolve: (slot: Slot) => string): string;
+/** Resolves one block slot's value, including a nested fragment. */
+export declare function blockText(value: unknown): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,yDAAyD;AACzD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;CACrC;AAID;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAEpF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAE/D;AAED,8DAA8D;AAC9D,MAAM,WAAW,IAAI;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IACjC,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC;CAC1D;AAED,MAAM,WAAW,QAAQ;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC5C,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IAChC,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;CAC1B;AA8BD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,UAAO,GAAG,QAAQ,CAiDlF;AAED,oEAAoE;AACpE,wBAAgB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAMhF;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAchD"}

package/dist/global.d.ts

@@ -0,0 +1,20 @@
+import { type Component } from '@firsthandjs/dom';
+import type { Interpolation } from './styled.js';
+import { type Theme } from './theme.js';
+/**
+ * A named animation, inserted once.
+ *
+ * Returns the name, so it reads the way it does in styled-components:
+ * `animation: ${spin} 1s linear infinite;`
+ */
+export declare function keyframes(strings: TemplateStringsArray, ...values: unknown[]): string;
+/**
+ * Styles for the document, attached for as long as the component lives.
+ *
+ * Interpolations may read the theme, and the rule is replaced when it changes.
+ * Everything else about it is global by definition: it is not scoped, and two
+ * instances of the same global style share one rule.
+ */
+export declare function createGlobalStyle(strings: TemplateStringsArray, ...values: Interpolation<unknown>[]): Component<Record<string, never>>;
+export type { Theme };
+//# sourceMappingURL=global.d.ts.map

package/dist/global.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../src/global.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,SAAS,EAAa,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,YAAY,CAAC;AAEtD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CASrF;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,oBAAoB,EAG7B,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,GAClC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAoClC;AAED,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * `@firsthandjs/styled` — styled-components' API, on a framework that renders once.
+ *
+ * ```tsx
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *   padding: 0.5rem 1rem;
+ *   border: 1px solid ${(p) => p.theme.line};
+ *   background: ${(p) => (p.$primary ? 'rebeccapurple' : 'transparent')};
+ *   &:hover {
+ *     filter: brightness(1.2);
+ *   }
+ * `;
+ *
+ * <Button $primary onClick={save}>Save</Button>;
+ * ```
+ *
+ * The difference from styled-components is what a prop change costs. There, a
+ * new prop value means a new class, inserted into the sheet and swapped on the
+ * element — a thousand rows with a colour each produce a thousand rules. Here,
+ * an interpolation that sits in a declaration's value becomes a CSS custom
+ * property: one rule for the component, and one `setProperty` per change, for
+ * any number of instances.
+ *
+ * Interpolations that produce whole declarations still resolve to a class per
+ * distinct result, because nothing else can express them — that is the same
+ * mechanism, kept for the cases that need it.
+ *
+ * Nesting (`&:hover`, `@media`) is the browser's own CSS nesting. There is no
+ * preprocessor in this package, which is most of why it is 1 kB.
+ */
+export { styled } from './styled.js';
+export type { ElementProps, Interpolation, StyledFactory, StyledProps } from './styled.js';
+export { css, isFragment } from './css.js';
+export type { CssFragment } from './css.js';
+export { keyframes, createGlobalStyle } from './global.js';
+export { ThemeContext, useTheme } from './theme.js';
+export type { Theme } from './theme.js';
+/**
+ * Your application's theme, declared by you.
+ *
+ * Empty here. An application describes its own:
+ *
+ * ```ts
+ * declare module '@firsthandjs/styled' {
+ *   interface FirsthandTheme {
+ *     background: string;
+ *     text: string;
+ *   }
+ * }
+ * ```
+ *
+ * and every interpolation then reads `props.theme.background` with a type
+ * rather than `props.theme['background']` with a cast. A project that declares
+ * nothing keeps the indexed form, so this costs nothing to ignore.
+ *
+ * It is declared here, in the entry module, because that is the module an
+ * application augments.
+ */
+export interface FirsthandTheme {
+}
+export { hash, reset as resetStyles } from './sheet.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACpD,YAAY,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,cAAc;CAAG;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+import{bind as j,signal as z,useContext as Y}from"@firsthandjs/core";import{component as _}from"@firsthandjs/dom";import{applyProp as D,insert as K}from"@firsthandjs/dom/internal";var I=Symbol("firsthand.css");function x(e,...t){return{[I]:!0,strings:[...e],values:t}}function $(e){return typeof e=="object"&&e!==null&&I in e}function B(e){for(let t=e.length-1;t>=0;t--){let n=e[t];if(n===":")return!0;if(n===";"||n==="{"||n==="}")return!1}return!1}function M(e){return e==null||e===!1||e===!0?"":String(e)}function C(e,t,n=!0){let o=[],s=[],a="",c=()=>{a!==""&&(s.push(a),a="")},g=p=>{for(let[h,b]of p.strings.entries()){if(a+=b,h>=p.values.length)continue;let m=p.values[h];if($(m)){g(m);continue}if(typeof m!="function"){a+=M(m);continue}let i=o.length,v=n&&B(a)?"value":"block",T={kind:v,property:`--${t}-${String(i)}`,fn:m};o.push(T),v==="value"?a+=`var(${T.property})`:(c(),s.push(T))}};return g(e),c(),{chunks:s,slots:o,static:o.length===0}}function k(e,t){let n="";for(let o of e.chunks)n+=typeof o=="string"?o:t(o);return n}function F(e){if($(e)){let t=C(e,"x");if(!t.static)throw new Error("A css`` fragment returned from an interpolation must not contain further functions.");return k(t,()=>"")}return M(e)}var P=new Map,d=null;function y(e){let t=2166136261;for(let n=0;n<e.length;n++)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function H(){return d!==null&&d.isConnected||(d=document.createElement("style"),d.setAttribute("data-firsthand-styled",""),document.head.appendChild(d)),d}function w(e,t){let n=P.get(e);if(n!==void 0)return n.count++,!1;let o=document.createTextNode(t);return P.set(e,{node:o,count:1}),H().appendChild(o),!0}function O(e){let t=P.get(e);t!==void 0&&(--t.count>0||(P.delete(e),t.node.remove()))}function J(){P.clear(),d?.remove(),d=null}import{createContext as L,useContext as N}from"@firsthandjs/core";var X=Object.freeze({}),S=L(X,"theme");function q(){return N(S)}function Q(e,t){return t==="children"||t==="class"||t.startsWith("$")?!1:t in e||t.startsWith("data-")||t.startsWith("aria-")||t.startsWith("on")||t==="style"||t==="role"}function U(e,t){let n={};for(let o of Object.keys(e))Object.defineProperty(n,o,{enumerable:!0,get:()=>e[o]});return Object.defineProperty(n,"theme",{enumerable:!0,get:()=>t.value}),n}var Z=0,V=new WeakMap;function W(e,t){let n=typeof e=="string"?e:null,o=n===null?(V.get(e)??0)+1:0,s=`s${y(t.strings.join("|"))}${String(++Z)}`,a=i=>`.${i}`.repeat(o+1),c=C(t,s,n!==null),g=k(c,()=>""),p=`${s}-${y(g)}`,h=c.slots.some(i=>i.kind==="block");h||w(p,`${a(p)}{${g}}`);let m=_(i=>{let v=Y(S),T=U(i,v),f=n===null?null:document.createElement(n),R="",E=f===null?z(""):null,A=r=>{let l=i.class,u=`${r}${typeof l=="string"&&l!==""?` ${l}`:""}`;u!==R&&(R=u,f===null?E.value=u:f.className=u)};h?j(()=>{let r=k(c,u=>F(u.fn(T))),l=`${s}-${y(r)}`;w(l,`${a(l)}{${r}}`),A(l)}):j(()=>{A(p)});for(let r of c.slots){if(r.kind!=="value")continue;let l=f;j(()=>{let u=r.fn(T),G=u==null||u===!1?"":String(u);l.style.setProperty(r.property,G)})}if(f===null){let r={};for(let l of Object.keys(i))l!=="class"&&Object.defineProperty(r,l,{enumerable:!0,get:()=>i[l]});return Object.defineProperty(r,"class",{enumerable:!0,get:()=>E.value}),e(r)}for(let r of Object.keys(i))Q(f,r)&&j(()=>{D(f,r,i[r])});return K(f,()=>i.children),f},void 0,`firsthand/styled:${s}`,n===null?`Styled(${e.name})`:`Styled(${n})`);return V.set(m,o),m}var ee=new Proxy((e=>(t,...n)=>W(e,x(t,...n))),{get:(e,t)=>(n,...o)=>W(t,x(n,...o))});import{bind as te,onCleanup as ne,useContext as oe}from"@firsthandjs/core";import{component as re}from"@firsthandjs/dom";function se(e,...t){let n=C(x(e,...t),"k",!1);if(!n.static)throw new Error("keyframes`` cannot interpolate functions: an animation has no props.");let o=k(n,()=>""),s=`k${y(o)}`;return w(s,`@keyframes ${s}{${o}}`),s}function ie(e,...t){let n=x(e,...t),o=C(n,"g",!1);return re(()=>{let a=oe(S),c=null,g=()=>{c!==null&&(O(c),c=null)};return te(()=>{let p={theme:a.value},h=k(o,m=>F(m.fn(p))),b=`g${y(h)}`;g(),w(b,h),c=b}),ne(g),null},void 0,`firsthand/styled:global${y(e.join("|"))}`,"GlobalStyle")}export{S as ThemeContext,ie as createGlobalStyle,x as css,y as hash,$ as isFragment,se as keyframes,J as resetStyles,ee as styled,q as useTheme};

package/dist/sheet.d.ts

@@ -0,0 +1,24 @@
+/**
+ * One stylesheet, one rule per distinct piece of CSS.
+ *
+ * Every rule this package emits is keyed by a hash of its own text, so the
+ * same styles written by a hundred component instances are inserted once. The
+ * sheet is append-only for as long as anything uses a rule, and each rule is
+ * remembered as the node it became — so removing one is a reference, not a
+ * search through the sheet for matching text.
+ */
+/**
+ * A short, stable name for a piece of CSS.
+ *
+ * FNV-1a: four lines, no dependency, and a collision would mean two different
+ * rules hashing the same — at which point the second is simply not inserted,
+ * which is visible immediately rather than subtly wrong.
+ */
+export declare function hash(text: string): string;
+/** Inserts a rule unless its key is already there. Returns whether it was new. */
+export declare function insert(key: string, rule: string): boolean;
+/** Removes a rule again, for `createGlobalStyle`'s disposal. */
+export declare function remove(key: string): void;
+/** Drops everything. For tests, and for a hot reload that wants a clean slate. */
+export declare function reset(): void;
+//# sourceMappingURL=sheet.d.ts.map

package/dist/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../src/sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAaH;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOzC;AAYD,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAUzD;AAED,gEAAgE;AAChE,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAYxC;AAED,kFAAkF;AAClF,wBAAgB,KAAK,IAAI,IAAI,CAI5B"}

package/dist/styled.d.ts

@@ -0,0 +1,32 @@
+import { type Component } from '@firsthandjs/dom';
+import { isFragment, type CssFragment } from './css.js';
+import { type Theme } from './theme.js';
+/** Props a styled element accepts beyond the ones you declare. */
+export type ElementProps<T extends string> = T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
+/** What an interpolation function is given: the props, plus the theme. */
+export type StyledProps<P> = P & {
+    readonly theme: Theme;
+};
+export type Interpolation<P> = string | number | CssFragment | ((props: StyledProps<P>) => unknown);
+export interface StyledFactory<Base> {
+    /**
+     * `P` is what you add: `styled.button<{ $primary?: boolean }>`.
+     *
+     * It defaults to `unknown` rather than an empty record, because an empty
+     * record's index signature would type every other prop — `children`
+     * included — as `never`.
+     */
+    <P = unknown>(strings: TemplateStringsArray, ...values: Interpolation<P & Base>[]): Component<P & Base>;
+}
+type Tags = {
+    [T in keyof JSX.IntrinsicElements]: StyledFactory<ElementProps<T>>;
+};
+/**
+ * `styled.div`, `styled.button`, … and `styled(Component)`.
+ *
+ * The tag list is a proxy rather than a hand-written map: every element the
+ * JSX namespace knows is available, and the package stays the same size.
+ */
+export declare const styled: Tags & (<P>(base: Component<P>) => StyledFactory<P>);
+export { isFragment };
+//# sourceMappingURL=styled.d.ts.map

package/dist/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAUA,OAAO,EAAa,KAAK,SAAS,EAAa,MAAM,kBAAkB,CAAC;AAKxE,OAAO,EAA2B,UAAU,EAAQ,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvF,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,YAAY,CAAC;AAEtD,kEAAkE;AAClE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAC9E,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,0EAA0E;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAEpG,MAAM,WAAW,aAAa,CAAC,IAAI;IACjC;;;;;;OAMG;IACH,CAAC,CAAC,GAAG,OAAO,EACV,OAAO,EAAE,oBAAoB,EAC7B,GAAG,MAAM,EAAE,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,GACnC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CACxB;AAsMD,KAAK,IAAI,GAAG;KACT,CAAC,IAAI,MAAM,GAAG,CAAC,iBAAiB,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CACnE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM,WAId,CAAC,QAAQ,SAAS,CAAC,CAAC,CAAC,KAAG,aAAa,CAAC,CAAC,CAAC,CAQ5C,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The theme, as an ordinary Firsthand context.
+ *
+ * Nothing about it is special: it is a context holding an object, so a theme
+ * swap is one signal write, and a styled component that reads `theme` updates
+ * the custom properties that depend on it — not the component, and not the
+ * rules that never mentioned the theme.
+ */
+import { type Context, type ReadonlyCell } from '@firsthandjs/core';
+import type { FirsthandTheme } from './index.js';
+/**
+ * What an interpolation is handed as `props.theme`.
+ *
+ * The declared theme once there is one, and an indexable object until then.
+ * `keyof` an empty interface is `never`, which is how that is detected.
+ */
+export type Theme = [keyof FirsthandTheme] extends [never] ? Readonly<Record<string, unknown>> : Readonly<FirsthandTheme>;
+/**
+ * Provide it with `provide(ThemeContext, myTheme)` — or a cell, to swap it.
+ *
+ * Annotated rather than inferred: an inferred type is *resolved* into the
+ * declaration file, and `Theme` would be frozen there as the empty-theme
+ * branch — so an application's `declare module` augmentation would change
+ * nothing. Written out, the conditional stays a conditional for whoever
+ * imports it.
+ */
+export declare const ThemeContext: Context<Theme>;
+/** The theme above this component, as a cell. */
+export declare function useTheme(): ReadonlyCell<Theme>;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA6B,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI/F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,MAAM,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,GACtD,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAEjC,QAAQ,CAAC,cAAc,CAAC,CAAC;AAI7B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,KAAK,CAAwC,CAAC;AAEjF,iDAAiD;AACjD,wBAAgB,QAAQ,IAAI,YAAY,CAAC,KAAK,CAAC,CAE9C"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@firsthandjs/styled",
+  "version": "0.1.0",
+  "description": "CSS-in-JS for Firsthand: tagged templates, themes, and fine-grained style updates.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@firsthandjs/core": "0.1.0",
+    "@firsthandjs/dom": "0.1.0",
+    "@firsthandjs/jsx-runtime": "0.1.0"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/firsthandjs/firsthand.git",
+    "directory": "packages/styled"
+  },
+  "bugs": {
+    "url": "https://github.com/firsthandjs/firsthand/issues"
+  },
+  "homepage": "https://github.com/firsthandjs/firsthand#readme",
+  "keywords": [
+    "firsthand",
+    "styled-components",
+    "css-in-js",
+    "styling",
+    "theme"
+  ]
+}