create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/ui-showcase/src/ui/view/tooltip.ts

@@ -0,0 +1,123 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Tooltip } from '@foldkit/ui'
+import type { AnchorConfig } from '@foldkit/ui/tooltip'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const triggerClassName =
+  'inline-flex items-center gap-1.5 px-4 py-2 text-base font-normal cursor-pointer transition rounded-lg border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 select-none'
+
+const panelClassName =
+  'rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white shadow-lg'
+
+const wrapperClassName = 'relative inline-block'
+
+const TOOLTIP_ANCHOR: AnchorConfig = {
+  placement: 'top',
+  gap: 6,
+  padding: 8,
+}
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Tooltip']),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Basic'],
+        ),
+        h.label(
+          [
+            h.For(Tooltip.triggerId(model.tooltipBasicDemo.id)),
+            h.Class('block mb-1.5 text-sm font-medium text-gray-900'),
+          ],
+          ['Tooltip trigger'],
+        ),
+        h.div(
+          [h.Class('relative')],
+          [
+            h.submodel({
+              slotId: model.tooltipBasicDemo.id,
+              model: model.tooltipBasicDemo,
+              view: Tooltip.view,
+              viewInputs: {
+                anchor: TOOLTIP_ANCHOR,
+                toView: ({ trigger, panel, isVisible }) =>
+                  h.div(
+                    [h.Class(wrapperClassName)],
+                    [
+                      h.button(
+                        [...trigger, h.Class(triggerClassName)],
+                        [h.span([], ['Hover or focus me'])],
+                      ),
+                      ...(isVisible
+                        ? [
+                            h.div(
+                              [...panel, h.Class(panelClassName)],
+                              [h.span([], ['This is a tooltip'])],
+                            ),
+                          ]
+                        : []),
+                    ],
+                  ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotTooltipBasicDemoMessage({ message }),
+            }),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['No delay'],
+        ),
+        h.label(
+          [
+            h.For(Tooltip.triggerId(model.tooltipNoDelayDemo.id)),
+            h.Class('block mb-1.5 text-sm font-medium text-gray-900'),
+          ],
+          ['Tooltip trigger'],
+        ),
+        h.div(
+          [h.Class('relative')],
+          [
+            h.submodel({
+              slotId: model.tooltipNoDelayDemo.id,
+              model: model.tooltipNoDelayDemo,
+              view: Tooltip.view,
+              viewInputs: {
+                anchor: TOOLTIP_ANCHOR,
+                toView: ({ trigger, panel, isVisible }) =>
+                  h.div(
+                    [h.Class(wrapperClassName)],
+                    [
+                      h.button(
+                        [...trigger, h.Class(triggerClassName)],
+                        [h.span([], ['No delay'])],
+                      ),
+                      ...(isVisible
+                        ? [
+                            h.div(
+                              [...panel, h.Class(panelClassName)],
+                              [h.span([], ['Shows immediately'])],
+                            ),
+                          ]
+                        : []),
+                    ],
+                  ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotTooltipNoDelayDemoMessage({ message }),
+            }),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/ui/view/virtualList.ts

@@ -0,0 +1,361 @@
+import { Array, Match as M, Option, pipe } from 'effect'
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { VirtualList } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+type Activity = Readonly<{
+  id: number
+  actor: string
+  initial: string
+  colorClass: string
+  verb: string
+  target: string
+  timeAgo: string
+  hasSummary: boolean
+}>
+
+export const ROW_COUNT = 10_000
+
+const actorNames = [
+  'Sarah Chen',
+  'Marcus Davies',
+  'Priya Patel',
+  'Alex Kim',
+  'Jordan Lee',
+  'Sam Rivera',
+  'Ben Carter',
+  'Mira Patel',
+  'Lucy Hong',
+  'Casey Park',
+  'Robin Adams',
+  'Tomás Reyes',
+]
+
+const actionVerbs = [
+  'merged',
+  'opened',
+  'commented on',
+  'approved',
+  'closed',
+  'reopened',
+  'requested review on',
+  'pushed to',
+]
+
+const colorClasses = [
+  'bg-rose-500',
+  'bg-amber-500',
+  'bg-emerald-500',
+  'bg-sky-500',
+  'bg-violet-500',
+  'bg-fuchsia-500',
+  'bg-teal-500',
+  'bg-orange-500',
+]
+
+const branchNames = [
+  'main',
+  'feat/scroll-handlers',
+  'fix/dialog-focus',
+  'refactor/auth',
+  'chore/deps',
+]
+
+const cycle = (xs: ReadonlyArray<string>, index: number): string =>
+  pipe(xs, Array.get(index % xs.length), Option.getOrThrow)
+
+const formatTimeAgo = (hours: number): string => {
+  if (hours < 1) {
+    return `${Math.max(1, Math.round(hours * 60))}m ago`
+  }
+  if (hours < 24) {
+    return `${Math.round(hours)}h ago`
+  }
+  const days = hours / 24
+  if (days < 30) {
+    return `${Math.round(days)}d ago`
+  }
+  const months = days / 30
+  if (months < 12) {
+    return `${Math.round(months)}mo ago`
+  }
+  return `${Math.round(months / 12)}y ago`
+}
+
+const targetForVerb = (verb: string, index: number): string => {
+  const number = ((index * 13) % 9999) + 1
+  return M.value(verb).pipe(
+    M.withReturnType<string>(),
+    M.when('pushed to', () => cycle(branchNames, index)),
+    M.whenOr('opened', 'closed', 'reopened', () => `issue #${number}`),
+    M.orElse(() => `PR #${number}`),
+  )
+}
+
+const sampleActivities: ReadonlyArray<Activity> = Array.makeBy(
+  ROW_COUNT,
+  index => {
+    const actor = cycle(actorNames, index)
+    const verb = cycle(actionVerbs, index)
+    const colorClass = cycle(colorClasses, index)
+    const hoursAgo = index * 2.3
+    return {
+      id: index,
+      actor,
+      initial: actor.charAt(0),
+      colorClass,
+      verb,
+      target: targetForVerb(verb, index),
+      timeAgo: formatTimeAgo(hoursAgo),
+      hasSummary: index % 4 === 0,
+    }
+  },
+)
+
+const containerClassName =
+  'h-96 w-full max-w-2xl rounded-lg bg-white ring-1 ring-gray-200 overscroll-none'
+
+const rowClassName =
+  'grid grid-cols-[2rem_1fr_5rem] items-center gap-3 px-4 border-b border-gray-100'
+
+const avatarClassName = (colorClass: string): string =>
+  `${colorClass} flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold text-white`
+
+const activityTextClassName = 'truncate text-sm text-gray-700'
+
+const actorClassName = 'font-semibold text-gray-900'
+
+const targetClassName = 'font-mono text-gray-900'
+
+const timeAgoClassName = 'text-right text-xs text-gray-500 tabular-nums'
+
+const buttonClassName =
+  'rounded bg-accent-600 hover:bg-accent-700 cursor-pointer px-3 py-1.5 text-sm font-medium text-white shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2'
+
+const headerClassName =
+  'flex items-end justify-between text-sm text-gray-600 max-w-2xl'
+
+// VARIABLE-HEIGHT DATA
+
+type Summary = Readonly<{
+  title: string
+  body: string
+  artifact: string
+}>
+
+const summaries: ReadonlyArray<Summary> = [
+  {
+    title: 'CI passing across all browsers',
+    body: 'Resolved the flake in the snapshot suite and confirmed the migration step runs idempotently against staging.',
+    artifact: 'ci/run-4892',
+  },
+  {
+    title: 'Tracking upstream change',
+    body: 'Linked the upstream regression and added reproduction context so the next reviewer has everything in one place.',
+    artifact: 'tracker/issue-218',
+  },
+  {
+    title: 'Release notes ready for review',
+    body: 'Bumped the patch version, regenerated the changelog, and queued the release notes for editorial pass.',
+    artifact: 'release/v0.42.1-rc1',
+  },
+  {
+    title: 'Rollback plan coordinated',
+    body: 'Walked through the unwind steps with on-call and pre-staged the revert PR in case the deploy needs to be undone.',
+    artifact: 'runbook/rollback-checklist',
+  },
+  {
+    title: 'Failure trace attached',
+    body: 'Captured the steps to reproduce, attached the failing trace, and tagged the owning team for triage.',
+    artifact: 'traces/failure-7c2e',
+  },
+  {
+    title: 'Visual direction approved',
+    body: 'Aligned with the design team on spacing, contrast, and the dark-mode treatment before merging the implementation.',
+    artifact: 'design/spec-v3',
+  },
+  {
+    title: 'Migration verified on staging',
+    body: 'Confirmed the migration runs cleanly against the staging snapshot and produces the expected row counts on every shard.',
+    artifact: 'migration/2026-04-batch',
+  },
+]
+
+const SHORT_ROW_HEIGHT_PX = 56
+const TALL_ROW_HEIGHT_PX = 112
+
+const summaryFor = (index: number): Summary =>
+  pipe(summaries, Array.get(index % summaries.length), Option.getOrThrow)
+
+export const variableActivities: ReadonlyArray<Activity> = sampleActivities
+
+export const variableRowHeightPx = (activity: Activity): number =>
+  activity.hasSummary ? TALL_ROW_HEIGHT_PX : SHORT_ROW_HEIGHT_PX
+
+const variableTallRowClassName =
+  'grid grid-cols-[2rem_1fr_5rem] items-center gap-3 px-4 py-3 border-b border-gray-100'
+
+const variableSummaryTitleClassName =
+  'mt-0.5 text-xs font-semibold text-gray-700'
+
+const variableSummaryBodyClassName =
+  'mt-0.5 text-xs text-gray-500 leading-tight line-clamp-1'
+
+const variableArtifactClassName =
+  'mt-1 inline-flex w-fit rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[10px] text-gray-600'
+
+const subsectionHeadingClassName = 'text-lg font-semibold text-gray-900 mt-2'
+
+const shortRow = (row: Activity, h: HtmlBuilder<UiMessage>): Html => {
+  return h.div(
+    [h.Class(rowClassName)],
+    [
+      h.div([h.Class(avatarClassName(row.colorClass))], [row.initial]),
+      h.div(
+        [h.Class(activityTextClassName)],
+        [
+          h.span([h.Class(actorClassName)], [row.actor]),
+          ' ',
+          row.verb,
+          ' ',
+          h.span([h.Class(targetClassName)], [row.target]),
+        ],
+      ),
+      h.div([h.Class(timeAgoClassName)], [row.timeAgo]),
+    ],
+  )
+}
+
+const tallRow = (
+  row: Activity,
+  summary: Summary,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  return h.div(
+    [h.Class(variableTallRowClassName)],
+    [
+      h.div([h.Class(avatarClassName(row.colorClass))], [row.initial]),
+      h.div(
+        [h.Class('min-w-0')],
+        [
+          h.div(
+            [h.Class(activityTextClassName)],
+            [
+              h.span([h.Class(actorClassName)], [row.actor]),
+              ' ',
+              row.verb,
+              ' ',
+              h.span([h.Class(targetClassName)], [row.target]),
+            ],
+          ),
+          h.div([h.Class(variableSummaryTitleClassName)], [summary.title]),
+          h.div([h.Class(variableSummaryBodyClassName)], [summary.body]),
+          h.div([h.Class(variableArtifactClassName)], [summary.artifact]),
+        ],
+      ),
+      h.div([h.Class(timeAgoClassName)], [row.timeAgo]),
+    ],
+  )
+}
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2(
+          [h.Class('text-2xl font-bold text-gray-900 mb-6')],
+          ['Virtual List'],
+        ),
+        h.div(
+          [h.Class('flex flex-col gap-8 max-w-2xl')],
+          [
+            h.div(
+              [h.Class('flex flex-col gap-4')],
+              [
+                h.h3([h.Class(subsectionHeadingClassName)], ['Basic']),
+                h.div(
+                  [h.Class(headerClassName)],
+                  [
+                    h.span(
+                      [],
+                      [`${ROW_COUNT.toLocaleString()} activity events`],
+                    ),
+                    h.button(
+                      [
+                        h.Class(buttonClassName),
+                        h.OnClick(UiMessage.ClickedVirtualListScrollToMiddle()),
+                      ],
+                      ['Jump to middle'],
+                    ),
+                  ],
+                ),
+                h.submodel({
+                  slotId: model.virtualListDemo.id,
+                  model: model.virtualListDemo,
+                  view: VirtualList.view<Activity>(),
+                  viewInputs: {
+                    items: sampleActivities,
+                    itemToKey: row => String(row.id),
+                    itemToView: row => shortRow(row, h),
+                    containerClassName,
+                  },
+                  toParentMessage: message =>
+                    UiMessage.GotVirtualListDemoMessage({ message }),
+                }),
+              ],
+            ),
+            h.div(
+              [h.Class('flex flex-col gap-4')],
+              [
+                h.h3(
+                  [h.Class(subsectionHeadingClassName)],
+                  ['Variable row heights'],
+                ),
+                h.div(
+                  [h.Class(headerClassName)],
+                  [
+                    h.span(
+                      [],
+                      ['Every fourth row is taller and shows a summary block'],
+                    ),
+                    h.button(
+                      [
+                        h.Class(buttonClassName),
+                        h.OnClick(
+                          UiMessage.ClickedVirtualListVariableScrollToMiddle(),
+                        ),
+                      ],
+                      ['Jump to middle'],
+                    ),
+                  ],
+                ),
+                h.submodel({
+                  slotId: model.virtualListVariableDemo.id,
+                  model: model.virtualListVariableDemo,
+                  view: VirtualList.view<Activity>(),
+                  viewInputs: {
+                    items: variableActivities,
+                    itemToKey: row => String(row.id),
+                    itemToRowHeightPx: variableRowHeightPx,
+                    itemToView: (row, index) =>
+                      row.hasSummary
+                        ? tallRow(row, summaryFor(index), h)
+                        : shortRow(row, h),
+                    containerClassName,
+                  },
+                  toParentMessage: message =>
+                    UiMessage.GotVirtualListVariableDemoMessage({ message }),
+                }),
+              ],
+            ),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/view-transitions/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "view-transitions-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-beta.88",
+    "@tailwindcss/vite": "^4.3.1",
+    "effect": "4.0.0-beta.88",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/view-transitions/src/artwork.ts

@@ -0,0 +1,80 @@
+import { Array, Option, Schema as S } from 'effect'
+
+export const Artwork = S.Struct({
+  id: S.Number,
+  title: S.String,
+  medium: S.String,
+  description: S.String,
+  gradientClassName: S.String,
+})
+export type Artwork = typeof Artwork.Type
+
+export const artworks: ReadonlyArray<Artwork> = [
+  {
+    id: 1,
+    title: 'Dawn Chorus',
+    medium: 'Gradient on canvas',
+    description:
+      'A warm wash of first light. The rose bleeds into amber the way a sunrise refuses a hard edge.',
+    gradientClassName: 'from-rose-400 to-amber-300',
+  },
+  {
+    id: 2,
+    title: 'Deep Water',
+    medium: 'Gradient on linen',
+    description:
+      'Open ocean past the shelf, where the blue stops describing depth and starts describing weight.',
+    gradientClassName: 'from-sky-500 to-indigo-700',
+  },
+  {
+    id: 3,
+    title: 'Moss Study',
+    medium: 'Gradient on paper',
+    description:
+      'Forest floor after a week of rain. Every green in the study is borrowed from something alive.',
+    gradientClassName: 'from-lime-400 to-emerald-600',
+  },
+  {
+    id: 4,
+    title: 'Violet Hour',
+    medium: 'Gradient on canvas',
+    description:
+      'The ten minutes after sunset when streetlights and sky briefly agree on a color.',
+    gradientClassName: 'from-purple-500 to-fuchsia-400',
+  },
+  {
+    id: 5,
+    title: 'Kiln',
+    medium: 'Gradient on steel',
+    description:
+      'Heat rendered literally. Orange at the mouth of the furnace, red where the eye gives up.',
+    gradientClassName: 'from-orange-500 to-red-600',
+  },
+  {
+    id: 6,
+    title: 'Glacier Milk',
+    medium: 'Gradient on linen',
+    description:
+      'Meltwater carries rock flour that turns whole rivers this improbable, chalky turquoise.',
+    gradientClassName: 'from-cyan-300 to-teal-500',
+  },
+  {
+    id: 7,
+    title: 'Graphite',
+    medium: 'Gradient on paper',
+    description:
+      'A monochrome argument that gray is not one color. Pencil shading scaled up to a weather system.',
+    gradientClassName: 'from-slate-400 to-zinc-700',
+  },
+  {
+    id: 8,
+    title: 'Pollen',
+    medium: 'Gradient on canvas',
+    description:
+      'Late spring in a single field. The yellow is loud on purpose; so is the season.',
+    gradientClassName: 'from-yellow-300 to-lime-500',
+  },
+]
+
+export const findArtwork = (artworkId: number): Option.Option<Artwork> =>
+  Array.findFirst(artworks, artwork => artwork.id === artworkId)

package/dist/templates/examples/view-transitions/src/entry.ts

@@ -0,0 +1,21 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, update, view, viewTransition } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  routing: {
+    onUrlRequest: request => Message.ClickedLink({ request }),
+    onUrlChange: url => Message.ChangedUrl({ url }),
+  },
+  viewTransition,
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)