@hypit/hypit 0.0.1 → 0.1.0

package/packages/comment-sticker/src/author.ts

@@ -0,0 +1,148 @@
+import { assertFontStackRef } from "@hypit/media";
+import type { FontStackRef } from "@hypit/media";
+import type { SvsRecipe } from "@hypit/svs";
+
+import { sealCommentStickerStyle } from "./program.js";
+import type { CommentStickerStyle, CommentStickerTextStyle } from "./types.js";
+
+const KEYS = new Set([
+  "stack-order",
+  "background", "border-color", "border-width", "radius", "padding-x", "padding-y", "gap", "rotation",
+  "shadow-color", "shadow-x", "shadow-y", "shadow-blur", "shadow-spread",
+  "tail", "tail-width", "tail-height", "tail-offset-x",
+  "avatar-fallback", "avatar-size", "avatar-border-width", "avatar-border-color", "avatar-background", "avatar-text-color",
+  "header-size", "header-weight", "header-line-height", "header-color",
+  "body-size", "body-weight", "body-line-height", "body-color", "body-max-lines",
+  "meta-size", "meta-weight", "meta-line-height", "meta-color",
+  "enter", "enter-frames", "enter-offset-y", "enter-start-scale", "enter-rotation-delta", "enter-easing",
+  "exit", "exit-frames", "exit-offset-y", "exit-easing",
+  "hold", "hold-amplitude-y", "hold-rotation-amplitude", "hold-period-frames",
+]);
+
+function fail(recipe: SvsRecipe, message: string): never {
+  throw new Error(`Comment Sticker Recipe ${recipe.path} ${message}`);
+}
+
+function optionalNumber(recipe: SvsRecipe, name: string): number | undefined {
+  const value = recipe.properties[name];
+  if (value === undefined) return undefined;
+  if (typeof value !== "number" || !Number.isFinite(value)) fail(recipe, `${name} must be a finite number.`);
+  return value;
+}
+
+function number(recipe: SvsRecipe, name: string, fallback: number): number {
+  return optionalNumber(recipe, name) ?? fallback;
+}
+
+function integer(recipe: SvsRecipe, name: string, fallback: number): number {
+  const value = number(recipe, name, fallback);
+  if (!Number.isSafeInteger(value)) fail(recipe, `${name} must be an integer.`);
+  return value;
+}
+
+function optionalString(recipe: SvsRecipe, name: string): string | undefined {
+  const value = recipe.properties[name];
+  if (value === undefined) return undefined;
+  if (typeof value !== "string" || value.trim().length === 0) fail(recipe, `${name} must be text.`);
+  return value.trim();
+}
+
+function string(recipe: SvsRecipe, name: string, fallback: string): string {
+  return optionalString(recipe, name) ?? fallback;
+}
+
+function boolean(recipe: SvsRecipe, name: string, fallback: boolean): boolean {
+  const value = recipe.properties[name];
+  if (value === undefined) return fallback;
+  if (typeof value !== "boolean") fail(recipe, `${name} must be boolean.`);
+  return value;
+}
+
+function oneOf<const T extends string>(recipe: SvsRecipe, name: string, values: readonly T[], fallback: T): T {
+  const value = string(recipe, name, fallback);
+  if (!values.includes(value as T)) fail(recipe, `${name} must be ${values.join(" | ")}.`);
+  return value as T;
+}
+
+function typography(
+  recipe: SvsRecipe,
+  fonts: FontStackRef,
+  prefix: "header" | "body" | "meta",
+  defaults: Omit<CommentStickerTextStyle, "fonts">,
+): CommentStickerTextStyle {
+  return {
+    fonts: structuredClone(fonts.faces),
+    sizePx: number(recipe, `${prefix}-size`, defaults.sizePx),
+    weight: integer(recipe, `${prefix}-weight`, defaults.weight),
+    lineHeight: number(recipe, `${prefix}-line-height`, defaults.lineHeight),
+    color: string(recipe, `${prefix}-color`, defaults.color),
+  };
+}
+
+export function decodeCommentStickerStyle(recipe: SvsRecipe, fonts: FontStackRef, id: string): CommentStickerStyle {
+  assertFontStackRef(fonts, "Comment Sticker font stack");
+  const unknown = Object.keys(recipe.properties).filter((key) => !KEYS.has(key));
+  if (unknown.length > 0) fail(recipe, `does not accept ${unknown.join(", ")}.`);
+  const body = typography(recipe, fonts, "body", { sizePx: 42, weight: 850, lineHeight: 1.16, color: "#111111" });
+  return sealCommentStickerStyle({
+
+    id,
+    stackingOrder: integer(recipe, "stack-order", 62),
+    card: {
+      background: string(recipe, "background", "#ffffff"),
+      borderColor: string(recipe, "border-color", "#0000000e"),
+      borderWidthPx: number(recipe, "border-width", 1),
+      radiusPx: number(recipe, "radius", 28),
+      paddingXPx: number(recipe, "padding-x", 28),
+      paddingYPx: number(recipe, "padding-y", 24),
+      gapPx: number(recipe, "gap", 18),
+      rotationDeg: number(recipe, "rotation", -2.5),
+      shadow: {
+        color: string(recipe, "shadow-color", "#0000004d"),
+        offsetX: number(recipe, "shadow-x", 0),
+        offsetY: number(recipe, "shadow-y", 18),
+        blurPx: number(recipe, "shadow-blur", 46),
+        spreadPx: number(recipe, "shadow-spread", 0),
+      },
+      tail: {
+        enabled: boolean(recipe, "tail", true),
+        widthPx: number(recipe, "tail-width", 42),
+        heightPx: number(recipe, "tail-height", 28),
+        offsetXPx: number(recipe, "tail-offset-x", 58),
+      },
+    },
+    avatar: {
+      fallback: oneOf(recipe, "avatar-fallback", ["none", "initial"] as const, "none"),
+      sizePx: number(recipe, "avatar-size", 58),
+      borderWidthPx: number(recipe, "avatar-border-width", 3),
+      borderColor: string(recipe, "avatar-border-color", "#ffffff"),
+      background: string(recipe, "avatar-background", "#34313a"),
+      textColor: string(recipe, "avatar-text-color", "#ffffff"),
+    },
+    header: typography(recipe, fonts, "header", { sizePx: 24, weight: 680, lineHeight: 1.15, color: "#8f8f8f" }),
+    body: { ...body, maxLines: integer(recipe, "body-max-lines", 3) },
+    meta: typography(recipe, fonts, "meta", { sizePx: 21, weight: 650, lineHeight: 1.15, color: "#8f8f8f" }),
+    motion: {
+      enter: {
+        kind: oneOf(recipe, "enter", ["none", "fade", "pop", "slide-pop"] as const, "pop"),
+        durationFrames: integer(recipe, "enter-frames", 17),
+        offsetYPx: number(recipe, "enter-offset-y", -180),
+        startScale: number(recipe, "enter-start-scale", 0.78),
+        rotationDeltaDeg: number(recipe, "enter-rotation-delta", -4.5),
+        easing: oneOf(recipe, "enter-easing", ["linear", "ease-in", "ease-out", "ease-in-out", "out-back"] as const, "ease-out"),
+      },
+      exit: {
+        kind: oneOf(recipe, "exit", ["none", "fade", "fade-up"] as const, "fade-up"),
+        durationFrames: integer(recipe, "exit-frames", 20),
+        offsetYPx: number(recipe, "exit-offset-y", -28),
+        easing: oneOf(recipe, "exit-easing", ["linear", "ease-in", "ease-out", "ease-in-out"] as const, "ease-in"),
+      },
+      hold: {
+        kind: oneOf(recipe, "hold", ["none", "float"] as const, "float"),
+        amplitudeYPx: number(recipe, "hold-amplitude-y", 4),
+        rotationAmplitudeDeg: number(recipe, "hold-rotation-amplitude", 0.35),
+        periodFrames: integer(recipe, "hold-period-frames", 84),
+      },
+    },
+  });
+}

package/packages/comment-sticker/src/component.ts

@@ -0,0 +1,97 @@
+import type { ComponentPackage, ProducerHandlerContext } from "@hypit/component-kit";
+import { canonicalize } from "@hypit/protocol";
+import type { BlobRef, StoredValue } from "@hypit/protocol";
+import type { ProgramSpace } from "@hypit/program-space";
+import type { CanvasSpace, SpatialFrame } from "@hypit/spatial";
+import type { Text } from "@hypit/text";
+
+import { commentStickerProducers, commentStickerTypes } from "./manifest.js";
+import { appendProjectedCommentSticker, assertCommentStickerProgram, createCommentStickerSet, createCommentStickerContent, setCommentStickerContentText, finalizeCommentSticker, renderCommentSticker } from "./program.js";
+import type {
+  CommentStickerHeader,
+  CommentStickerContent,
+  CommentStickerItemSpec,
+  CommentStickerProgram,
+  CommentStickerSet,
+  CommentStickerStyle,
+} from "./types.js";
+import type { TemporalWindow } from "@hypit/temporal";
+
+function inline<T>(value: StoredValue | undefined, label: string): T {
+  if (value?.kind !== "inline") throw new Error(`${label} must be inline.`);
+  return value.value as unknown as T;
+}
+
+const output = (value: unknown) => ({ kind: "inline" as const, value: canonicalize(value) });
+
+function common(inputs: Record<string, { readonly value: StoredValue } | undefined>) {
+  return {
+    set: inline<CommentStickerSet>(inputs.set?.value, "CommentStickerSet"),
+    header: inline<CommentStickerHeader>(inputs.header?.value, "CommentStickerHeader"),
+    space: inline<ProgramSpace>(inputs.space?.value, "ProgramSpace"),
+    frame: inline<SpatialFrame>(inputs.frame?.value, "SpatialFrame"),
+    style: inline<CommentStickerStyle>(inputs.style?.value, "CommentStickerStyle"),
+    spec: inline<CommentStickerItemSpec>(inputs.spec?.value, "CommentStickerItemSpec"),
+    content: inline<CommentStickerContent>(inputs.content?.value, "CommentStickerContent"),
+    window: inline<TemporalWindow>(inputs.window?.value, "TemporalWindow"),
+  };
+}
+
+export const commentStickerComponent = {
+  producers: [
+    {
+      producer: commentStickerProducers.createContent,
+      handler: ({ inputs }) => ({ outputs: { content: output(createCommentStickerContent(
+        inline<Text>(inputs.comment?.value, "Text"),
+      )) }, needs: {} }),
+    },
+    ...([
+      [commentStickerProducers.setContentAuthor, "author"],
+      [commentStickerProducers.setContentHeader, "header"],
+      [commentStickerProducers.setContentMeta, "meta"],
+    ] as const).map(([producer, field]) => ({
+      producer,
+      handler: ({ inputs }: ProducerHandlerContext) => ({ outputs: { content: output(setCommentStickerContentText(
+        inline<CommentStickerContent>(inputs.content?.value, "CommentStickerContent"),
+        field,
+        inline<Text>(inputs[field]?.value, "Text"),
+      )) }, needs: {} }),
+    })),
+    {
+      producer: commentStickerProducers.createSet,
+      handler: () => ({ outputs: { set: output(createCommentStickerSet()) }, needs: {} }),
+    },
+    ...([
+      [commentStickerProducers.appendItem, false],
+      [commentStickerProducers.appendItemAvatar, true],
+    ] as const).map(([producer, avatar]) => ({
+      producer,
+      handler: ({ inputs }: ProducerHandlerContext) => {
+        const values = common(inputs);
+        return { outputs: { set: output(appendProjectedCommentSticker(
+          values.set, values.header, values.space, values.frame, values.style, values.spec, values.content, values.window,
+          avatar ? inline<BlobRef>(inputs.avatar?.value, "Comment Sticker avatar") : undefined,
+        )) }, needs: {} };
+      },
+    })),
+    {
+      producer: commentStickerProducers.finalize,
+      handler: ({ inputs }) => ({ outputs: { program: output(finalizeCommentSticker(
+        inline<CommentStickerSet>(inputs.set?.value, "CommentStickerSet"),
+        inline<CommentStickerHeader>(inputs.header?.value, "CommentStickerHeader"),
+      )) }, needs: {} }),
+    },
+    {
+      producer: commentStickerProducers.render,
+      handler: ({ inputs }) => ({ outputs: { track: output(renderCommentSticker(
+        inline<CanvasSpace>(inputs.canvas?.value, "CanvasSpace"),
+        inline<ProgramSpace>(inputs.space?.value, "ProgramSpace"),
+        inline<CommentStickerProgram>(inputs.program?.value, "CommentStickerProgram"),
+      )) }, needs: {} }),
+    },
+  ],
+  validators: [{
+    type: commentStickerTypes.program,
+    handler: ({ value }) => assertCommentStickerProgram(inline<CommentStickerProgram>(value, "CommentStickerProgram")),
+  }],
+} satisfies ComponentPackage;

package/packages/comment-sticker/src/fragment.ts

@@ -0,0 +1,124 @@
+import { programSpaceTypes } from "@hypit/program-space";
+import { artifactTypes } from "@hypit/artifact";
+import { compositionTypes } from "@hypit/composition";
+import { sealGraphFragment } from "@hypit/elaborator";
+import type { FragmentOperation } from "@hypit/elaborator";
+import type { TypeRef } from "@hypit/protocol";
+import { spatialTypes } from "@hypit/spatial";
+import { textTypes } from "@hypit/text";
+import { temporalTypes } from "@hypit/temporal";
+
+import { commentStickerProducers, commentStickerTypes } from "./manifest.js";
+
+export type CommentStickerFragmentItem = {
+  readonly windowName: string;
+  readonly specName: string;
+  readonly frameName: string;
+  readonly styleName: string;
+  readonly avatarName?: string;
+  readonly commentName: string;
+  readonly authorName?: string;
+  readonly headerTextName?: string;
+  readonly metaName?: string;
+};
+
+const input = (name: string) => ({ kind: "fragment-input" as const, name });
+const operation = (id: string) => ({ kind: "fragment-operation" as const, operation: id });
+
+function appendProducer(item: CommentStickerFragmentItem) {
+  return item.avatarName === undefined ? commentStickerProducers.appendItem : commentStickerProducers.appendItemAvatar;
+}
+
+export function createCommentStickerFragment(items: readonly CommentStickerFragmentItem[]) {
+  if (items.length === 0) throw new Error("Comment Sticker Fragment requires at least one Item.");
+  const types = new Map<string, TypeRef>();
+  const operations: FragmentOperation[] = [
+    {
+      id: "comment:set:empty",
+      producer: commentStickerProducers.createSet,
+      inputs: {},
+      result: { kind: "output", name: "set" },
+    },
+  ];
+  let current = "comment:set:empty";
+  items.forEach((item, index) => {
+    types.set(item.specName, commentStickerTypes.itemSpec);
+    types.set(item.windowName, temporalTypes.window);
+    types.set(item.frameName, spatialTypes.frame);
+    types.set(item.styleName, commentStickerTypes.style);
+    types.set(item.commentName, textTypes.text);
+    if (item.authorName !== undefined) types.set(item.authorName, textTypes.text);
+    if (item.headerTextName !== undefined) types.set(item.headerTextName, textTypes.text);
+    if (item.metaName !== undefined) types.set(item.metaName, textTypes.text);
+    if (item.avatarName !== undefined) types.set(item.avatarName, artifactTypes.blob);
+    const suffix = String(index + 1).padStart(4, "0");
+    const createContentId = `comment:content:${suffix}:create`;
+    operations.push({
+      id: createContentId,
+      producer: commentStickerProducers.createContent,
+      inputs: { comment: input(item.commentName) },
+      result: { kind: "output", name: "content" },
+    });
+    let content = operation(createContentId);
+    for (const [field, name, producer] of [
+      ["author", item.authorName, commentStickerProducers.setContentAuthor],
+      ["header", item.headerTextName, commentStickerProducers.setContentHeader],
+      ["meta", item.metaName, commentStickerProducers.setContentMeta],
+    ] as const) {
+      if (name === undefined) continue;
+      const fieldId = `comment:content:${suffix}:${field}`;
+      operations.push({
+        id: fieldId,
+        producer,
+        inputs: { content, [field]: input(name) },
+        result: { kind: "output", name: "content" },
+      });
+      content = operation(fieldId);
+    }
+    const id = `comment:set:append:${suffix}`;
+    operations.push({
+      id,
+      producer: appendProducer(item),
+      inputs: {
+        set: operation(current),
+        header: input("header"),
+        space: input("space"),
+        frame: input(item.frameName),
+        style: input(item.styleName),
+        window: input(item.windowName),
+        spec: input(item.specName),
+        content,
+        ...(item.avatarName === undefined ? {} : { avatar: input(item.avatarName) }),
+      },
+      result: { kind: "output", name: "set" },
+    });
+    current = id;
+  });
+  operations.push(
+    {
+      id: "comment:program",
+      producer: commentStickerProducers.finalize,
+      inputs: { set: operation(current), header: input("header") },
+      result: { kind: "output", name: "program" },
+    },
+    {
+      id: "comment:track",
+      producer: commentStickerProducers.render,
+      inputs: { canvas: input("canvas"), space: input("space"), program: operation("comment:program") },
+      result: { kind: "output", name: "track" },
+    },
+  );
+  return sealGraphFragment({
+    inputs: [
+      { name: "canvas", type: spatialTypes.canvas },
+      { name: "header", type: commentStickerTypes.header },
+      { name: "space", type: programSpaceTypes.programSpace },
+      ...[...types].map(([inputName, type]) => ({ name: inputName, type })),
+    ],
+    operations,
+    exports: [
+      { name: "program", type: commentStickerTypes.program, root: operation("comment:program") },
+      { name: "track", type: compositionTypes.visualTrack, root: operation("comment:track") },
+    ],
+  });
+}

package/packages/comment-sticker/src/index.ts

@@ -0,0 +1,8 @@
+export { decodeCommentStickerStyle } from "./author.js";
+export { commentStickerComponent } from "./component.js";
+export { createCommentStickerFragment } from "./fragment.js";
+export type { CommentStickerFragmentItem } from "./fragment.js";
+export { commentStickerDependency, commentStickerHeaderSchema, commentStickerItemSpecSchema, commentStickerManifest, commentStickerMarkupSurfaces, commentStickerModuleRef, commentStickerProducers, commentStickerProgramSchema, commentStickerSetSchema, commentStickerStyleSchema, commentStickerTypes } from "./manifest.js";
+export { appendProjectedCommentSticker, assertCommentStickerContent, assertCommentStickerHeader, assertCommentStickerItemSpec, assertCommentStickerProgram, assertCommentStickerSet, assertCommentStickerStyle, createCommentStickerSet, createCommentStickerContent, finalizeCommentSticker, renderCommentSticker, sealCommentStickerHeader, sealCommentStickerItemSpec, sealCommentStickerProgram, sealCommentStickerStyle, setCommentStickerContentText } from "./program.js";
+export { decodeCommentStickerStyleSurface, decodeCommentStickerTrackSurface } from "./surface.js";
+export type * from "./types.js";