@posthog/twig-components 0.1.0

package/dist/catalog.css

@@ -0,0 +1,259 @@
+.vac-app,
+.twig-browser {
+  --vac-paper: #f7eddf;
+  --vac-ink: #2d2b29;
+  --vac-muted: #6d6258;
+  --vac-line: #d7c8b6;
+  --vac-fill: #efe1ce;
+}
+.vac-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  border: 0;
+  margin: 20px 0 12px;
+}
+.vac-filter {
+  padding: 8px 16px;
+  border: 1px solid var(--vac-line);
+  border-radius: 4px;
+}
+.vac-filter[aria-pressed="true"] {
+  background: var(--vac-ink);
+  color: var(--vac-paper);
+  border-color: var(--vac-ink);
+}
+.vac-card {
+  min-width: 0;
+}
+.vac-card a {
+  display: block;
+  border-radius: 4px;
+}
+.vac-card a:hover h3 {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.vac-card-body {
+  padding: 14px 0;
+}
+.vac-image {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 4 / 3;
+  background: var(--vac-fill);
+  border: 1px solid var(--vac-line);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.vac-image span {
+  color: var(--vac-muted);
+  font-size: 12px;
+}
+.vac-image img {
+  object-fit: cover;
+}
+.vac-image-large {
+  aspect-ratio: 2.3 / 1;
+}
+
+@font-face {
+  font-family: TwigHalfre;
+  src: url("./assets/Halfre.ttf") format("truetype");
+  font-display: swap;
+}
+.twig-browser {
+  container-type: inline-size;
+  background: var(--vac-paper);
+  color: var(--vac-ink);
+  font: 15px/1.6 TwigHalfre, sans-serif;
+  border: 1px solid var(--vac-line);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.twig-browser * {
+  box-sizing: border-box;
+}
+.twig-browser header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--vac-line);
+}
+.twig-browser header img {
+  width: 54px;
+  height: auto;
+}
+.twig-browser header span {
+  font-size: 12px;
+  text-decoration: underline;
+}
+.twig-browser main {
+  padding: 20px;
+}
+.twig-browser :is(h2, h3, p) {
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: normal;
+}
+.twig-browser h2 {
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 4px 0 16px;
+}
+.twig-browser h3 {
+  font-size: 19px;
+  font-weight: 500;
+  line-height: 1.3;
+  margin: 0;
+}
+.twig-browser p {
+  margin: 8px 0;
+}
+.twig-browser .vac-muted {
+  color: var(--vac-muted);
+  font-size: 13px;
+}
+.twig-browser .vac-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.twig-browser .vac-filters {
+  padding: 0;
+}
+.twig-browser .vac-filter {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.twig-browser .vac-filter[aria-pressed="true"] {
+  background: var(--vac-ink);
+  color: var(--vac-paper);
+}
+.twig-browser button:focus-visible {
+  outline: 3px solid var(--vac-ink);
+  outline-offset: 3px;
+}
+.twig-browser .vac-image img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.twig-browser-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+.twig-browser-hero {
+  position: relative;
+  padding: 8px 0 28px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--vac-line);
+}
+.twig-browser-hero h2 {
+  font-size: 34px;
+  letter-spacing: -0.035em;
+}
+.twig-browser-hero p {
+  max-width: 270px;
+}
+.twig-browser-hero img {
+  display: none;
+}
+@container (min-width: 500px) {
+  .twig-browser-hero {
+    padding-right: 170px;
+  }
+  .twig-browser-hero img {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 150px;
+  }
+}
+@container (max-width: 340px) {
+  .twig-browser-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .twig-browser .vac-filter {
+    padding: 6px 10px;
+  }
+}
+
+/* Read-only Twig excerpt. All selectors stay inside this Twig-owned root. */
+.twig-stays-preview {
+  --twig-paper: #f7eddf;
+  --twig-ink: #2d2b29;
+  --twig-muted: #6d6258;
+  --twig-line: #d7c8b6;
+  --twig-fill: #efe1ce;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--twig-paper);
+  color: var(--twig-ink);
+  border: 1px solid var(--twig-line);
+  border-radius: 4px;
+  font: 16px/1.45 TwigHalfre, sans-serif;
+}
+.twig-stays-preview *,
+.twig-stays-preview *::before,
+.twig-stays-preview *::after {
+  box-sizing: border-box;
+}
+.twig-stays-preview-inner {
+  padding: 20px;
+}
+.twig-stays-preview-kicker {
+  color: var(--twig-muted);
+  font-size: 13px;
+  text-transform: uppercase;
+}
+.twig-stays-preview h3 {
+  margin: 4px 0 18px;
+  color: var(--twig-ink);
+  font: 600 27px/1.2 TwigHalfre, sans-serif;
+}
+.twig-stays-preview-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.twig-stays-preview-filter {
+  padding: 9px 14px;
+  border: 1px solid var(--twig-line);
+  border-radius: 4px;
+}
+.twig-stays-preview-filter[data-selected="true"] {
+  background: var(--twig-ink);
+  border-color: var(--twig-ink);
+  color: var(--twig-paper);
+}
+.twig-stays-preview-count {
+  margin: 16px 0 11px;
+  color: var(--twig-muted);
+}
+.twig-stays-preview-stay {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 9px;
+  border: 1px solid var(--twig-line);
+  border-radius: 4px;
+}
+.twig-stays-preview-image {
+  flex: none;
+  width: 68px;
+  height: 50px;
+  border-radius: 4px;
+  background: var(--twig-fill);
+}

package/dist/catalog.d.ts

@@ -0,0 +1,57 @@
+/** Fictional stays. Adiron-shack content supplied by Sarah; other entries remain fixtures. */
+export declare const guestType: "human";
+export type CharacterContent = {
+    id: string;
+    revision: string | null;
+    name: string | null;
+    species: string | null;
+    portrait: {
+        src: string;
+        alt: string;
+    } | null;
+    biography: string | null;
+    voiceGuidance: string | null;
+    approvedExamples: readonly string[];
+};
+export type Stay = {
+    id: string;
+    hostId: string;
+    title: string | null;
+    setting: "Forest" | "Coast" | "Mountain";
+    location: string | null;
+    images: readonly {
+        src: string;
+        alt: string;
+        source: string;
+        creditUrl?: string;
+    }[];
+    nightlyRate: number;
+    currency: "USD";
+    capacity: number | null;
+    amenities: readonly string[];
+    cancellationPolicy: string | null;
+    accommodationType?: string;
+    vibe?: string;
+    description?: string;
+    bedrooms?: number;
+    bathrooms?: number;
+    sleepingArrangements?: readonly string[];
+    lakeAccess?: string;
+    photoCredit?: string;
+};
+export declare const characters: readonly CharacterContent[];
+export declare const conciergeContent: {
+    revision: null;
+    name: null;
+    voiceGuidance: null;
+    approvedExamples: never[];
+};
+export declare const stays: readonly Stay[];
+export declare function stayLabel(stay: Stay): string;
+export declare function nightlyPrice(stay: Stay): string;
+export declare function filterStays(setting: "All" | Stay["setting"], search?: string): Stay[];
+export declare const discoveryCopy: {
+    title: string;
+    subtitle: string;
+    introduction: string;
+};

package/dist/catalog.js

@@ -0,0 +1,111 @@
+/** Fictional stays. Adiron-shack content supplied by Sarah; other entries remain fixtures. */
+export const guestType = "human";
+// Sarah supplies all character fields. IDs are technical references, not names.
+export const characters = [
+    {
+        id: "woodrow-sparks",
+        revision: "2026-09-21",
+        name: "Woodrow “Woody” Sparks",
+        species: "Pileated woodpecker",
+        portrait: null,
+        biography: "I came up for Woodstock and never quite got around to leaving. I believe in sharing the harvest, looking after the land, and not letting a perfectly good afternoon become productive. You humans seem to struggle with that last one. Come sit by the fire. We’ll work on it. The chickens have asked me to clarify that they are residents, not amenities.",
+        voiceGuidance: "Sarah’s character direction: a laid-back hippie who never left upstate New York after Woodstock, but migrated to a cabin upstate. Keeps chickens; big into sharecropping and saving the environment. Write in first person with warm, deadpan observations about human habits from an animal’s perspective. Be a welcoming host who finds humans mildly baffling. Keep practical facts clear; use occasional understated jokes, not a punchline in every sentence. Sarah requested Bear & Breakfast as a tonal reference; write original wording and retain Woody’s own character.",
+        approvedExamples: [],
+    },
+    ...[1, 2, 3].map((index) => ({
+        id: `host-${index}`,
+        revision: null,
+        name: null,
+        species: null,
+        portrait: null,
+        biography: null,
+        voiceGuidance: null,
+        approvedExamples: [],
+    })),
+];
+export const conciergeContent = {
+    revision: null,
+    name: null,
+    voiceGuidance: null,
+    approvedExamples: [],
+};
+export const stays = [
+    {
+        id: "stay-01",
+        hostId: "woodrow-sparks",
+        setting: "Forest",
+        title: "Adiron-shack",
+        location: "Adirondacks, New York",
+        accommodationType: "A-frame cabin",
+        vibe: "Get me out of the city. Preferably near a fire pit.",
+        description: "An A-frame cabin in the Adirondacks for four humans. Two king bedrooms, each with a private bathroom. Humans have strong feelings about doors. There’s a path down to the lake, a grill, and a back patio with a fire pit. Woody’s chickens live on the property, too. They’ve been enjoying the outdoors without booking anything.",
+        nightlyRate: 355,
+        currency: "USD",
+        capacity: 4,
+        bedrooms: 2,
+        bathrooms: 2,
+        sleepingArrangements: [
+            "King bed · Private bathroom",
+            "King bed · Private bathroom",
+        ],
+        amenities: [
+            "Lake access via a walking path",
+            "Fireplace / fire pit",
+            "Grill",
+            "Back patio",
+        ],
+        lakeAccess: "The cabin is not lakefront. A walking path leads down to the lake.",
+        cancellationPolicy: null,
+        images: [
+            {
+                src: "/twig/stays/adiron-shack/cabin.jpg",
+                alt: "Dark A-frame cabin among autumn trees, with a gravel path leading to the entrance at dusk",
+                source: "clay-banks-gmQr2-qWkYQ-unsplash.jpg",
+                creditUrl: "https://unsplash.com/photos/a-small-black-cabin-in-the-middle-of-a-forest-gmQr2-qWkYQ",
+            },
+            {
+                src: "/twig/stays/adiron-shack/patio.jpg",
+                alt: "A-frame cabin with a back patio, string lights, and chairs around an outdoor fire pit",
+                source: "clay-banks-AZDyU1hXtCE-unsplash.jpg",
+                creditUrl: "https://unsplash.com/photos/a-frame-cabin-in-the-woods-with-a-green-door-DS2rtg-Nbgk",
+            },
+        ],
+        photoCredit: "Clay Banks / Unsplash",
+    },
+    ...[
+        { id: "stay-02", hostId: "host-2", setting: "Coast", nightlyRate: 180 },
+        { id: "stay-03", hostId: "host-3", setting: "Mountain", nightlyRate: 160 },
+        { id: "stay-04", hostId: "host-1", setting: "Forest", nightlyRate: 190 },
+    ].map((stay) => ({
+        ...stay,
+        setting: stay.setting,
+        title: null,
+        location: null,
+        images: [],
+        currency: "USD",
+        capacity: null,
+        amenities: [],
+        cancellationPolicy: null,
+    })),
+];
+export function stayLabel(stay) {
+    return stay.title ?? `${stay.setting} stay`;
+}
+export function nightlyPrice(stay) {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: stay.currency,
+        maximumFractionDigits: 0,
+    }).format(stay.nightlyRate);
+}
+export function filterStays(setting, search = "") {
+    return stays.filter((stay) => (setting === "All" || stay.setting === setting) &&
+        `${stay.title ?? ""} ${stay.location ?? ""} ${stay.setting}`
+            .toLowerCase()
+            .includes(search.toLowerCase()));
+}
+export const discoveryCopy = {
+    title: "Vacation rentals.",
+    subtitle: "Run by birds.",
+    introduction: "Birds know how to build a home. Now they’re designing your next getaway.",
+};

package/dist/filter-lab.d.ts

@@ -0,0 +1,62 @@
+export type LabConfig = {
+    eventName: string;
+    source: "clicked" | "fixed";
+    fixedValue: string;
+};
+export type LabEvent = {
+    id: number;
+    event: string;
+    clicked: string;
+    properties: {
+        destination_type: string;
+    };
+};
+export type LabState = {
+    config: LabConfig;
+    applied: LabConfig | null;
+    step: number;
+    selecting: boolean;
+    selected: boolean;
+    events: LabEvent[];
+    before: LabEvent[];
+};
+export declare const initialLabState: LabState;
+export type LabAction = {
+    type: "example";
+} | {
+    type: "repair";
+} | {
+    type: "select";
+} | {
+    type: "cancel";
+} | {
+    type: "target";
+} | {
+    type: "edit";
+    config: Partial<LabConfig>;
+} | {
+    type: "step";
+    step: number;
+} | {
+    type: "apply";
+} | {
+    type: "filter";
+    setting: string;
+} | {
+    type: "clear";
+} | {
+    type: "reset";
+};
+export declare function validEventName(name: string): boolean;
+export declare function filterLabReducer(state: LabState, action: LabAction): LabState;
+export declare function labPassed(state: LabState): boolean;
+export declare function latestFilterFeedback(state: LabState): string | null;
+export declare function filterLabCode(config: LabConfig): string;
+export declare function summarizeFilterEvents(events: readonly LabEvent[]): {
+    rows: {
+        setting: string;
+        actual: number;
+        recorded: number;
+    }[];
+    mismatches: number;
+};

package/dist/filter-lab.js

@@ -0,0 +1,133 @@
+export const initialLabState = {
+    config: { eventName: "", source: "fixed", fixedValue: "Forest" },
+    applied: null,
+    step: 0,
+    selecting: false,
+    selected: false,
+    events: [],
+    before: [],
+};
+export function validEventName(name) {
+    return /^[a-z][a-z0-9_]{0,63}$/.test(name);
+}
+export function filterLabReducer(state, action) {
+    switch (action.type) {
+        case "example": {
+            const config = {
+                eventName: "stay_filter_selected",
+                source: "fixed",
+                fixedValue: "Forest",
+            };
+            return {
+                ...initialLabState,
+                config,
+                applied: { ...config },
+                selected: true,
+                step: 3,
+            };
+        }
+        case "repair":
+            return {
+                ...state,
+                before: state.applied?.source === "fixed" && state.events.length
+                    ? [...state.events]
+                    : state.before,
+                applied: null,
+                events: [],
+                step: 2,
+            };
+        case "reset":
+            return initialLabState;
+        case "clear":
+            return { ...state, events: [] };
+        case "select":
+            return { ...state, selecting: true };
+        case "cancel":
+            return { ...state, selecting: false };
+        case "target":
+            return state.selecting
+                ? {
+                    ...state,
+                    selected: true,
+                    selecting: false,
+                    step: 1,
+                    applied: null,
+                    events: [],
+                }
+                : state;
+        case "edit":
+            return {
+                ...state,
+                config: { ...state.config, ...action.config },
+                applied: null,
+                events: [],
+            };
+        case "step":
+            return { ...state, step: action.step, selecting: false };
+        case "apply":
+            return state.selected &&
+                validEventName(state.config.eventName) &&
+                (state.config.source === "clicked" || state.config.fixedValue.trim())
+                ? { ...state, applied: { ...state.config }, events: [], step: 3 }
+                : state;
+        case "filter":
+            return !state.applied || state.events.length >= 20
+                ? state
+                : {
+                    ...state,
+                    events: [
+                        ...state.events,
+                        {
+                            id: state.events.length + 1,
+                            event: state.applied.eventName,
+                            clicked: action.setting,
+                            properties: {
+                                destination_type: state.applied.source === "clicked"
+                                    ? action.setting
+                                    : state.applied.fixedValue,
+                            },
+                        },
+                    ],
+                };
+    }
+}
+export function labPassed(state) {
+    return (["Forest", "Coast"].every((setting) => state.events.some((event) => event.clicked === setting &&
+        event.properties.destination_type === setting)) &&
+        state.events.every((event) => event.clicked === event.properties.destination_type));
+}
+export function latestFilterFeedback(state) {
+    const latest = state.events.at(-1);
+    if (!latest)
+        return null;
+    const recorded = latest.properties.destination_type;
+    if (latest.clicked !== recorded) {
+        return `You clicked ${latest.clicked}, but recorded ${recorded}. A fixed value stays the same for every click. Change the property source, apply, and test again.`;
+    }
+    if (state.applied?.source === "fixed") {
+        const other = latest.clicked === "Coast" ? "Forest" : "Coast";
+        return `Correct for this click: ${latest.clicked} recorded ${recorded}. But clicking ${other} would also record ${recorded}, because the value is fixed. Use the clicked filter’s value to handle both.`;
+    }
+    return `Correct: ${latest.clicked} recorded ${recorded}. The property follows the filter you clicked.`;
+}
+export function filterLabCode(config) {
+    return `// Inside the filter's click handler\nposthog.capture(${JSON.stringify(config.eventName || "your_event_name")}, {\n  destination_type: ${config.source === "clicked"
+        ? "selectedDestinationType"
+        : JSON.stringify(config.fixedValue)},\n});`;
+}
+export function summarizeFilterEvents(events) {
+    const rows = new Map();
+    const row = (setting) => {
+        if (!rows.has(setting))
+            rows.set(setting, { setting, actual: 0, recorded: 0 });
+        return rows.get(setting);
+    };
+    for (const event of events) {
+        row(event.clicked).actual++;
+        row(event.properties.destination_type).recorded++;
+    }
+    return {
+        rows: [...rows.values()],
+        mismatches: events.filter((event) => event.clicked !== event.properties.destination_type).length,
+    };
+}