@luhtech/site-visuals 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,25 @@
+# @luhtech/site-visuals
+
+Canonical visual components for LuhTech venture marketing sites -- responsive hero images, numbered diagram figures, and article bylines. Composes with `@luhtech/site-template` (peer dependency); does not fork or replace any of its components.
+
+## Components
+
+- **`Hero.astro`** -- a real, responsive hero image (AVIF/WebP/JPEG at 768/1280/1920 via `astro:assets`' `<Picture>`), with the same eyebrow/heading/subheading/CTA treatment every other section already uses (via `@luhtech/site-template`'s `SectionHeading`/`CtaLink`). A standalone, directly-composed component -- like `SplashHero` in site-template, it is not wired into `Section.astro`'s `sectionKind` dispatch table. A page reaches for it when its hero section has a real `heroImage`.
+- **`DiagramFigure.astro`** -- wraps site-template's own `Diagram.astro` with an optional `number` prop, prefixing the caption with "Figure N." Deliberately not named `Figure` -- site-template's `Figure.astro` already renders a different schema entity (`section.figures[]`, a cited-stat callout), not `section.diagrams[]`.
+- **`Byline.astro`** -- author / date / reading time / series / market-cell label for an article. Prop-driven, not schema-reading (`article.schema.json` has no author/series/publishedAt fields yet -- that's separate, not-yet-landed scope). Reading time is always computed at render from real body text via `readingTimeMinutes()`, never accepted as a stored value.
+
+## Setup in a consuming site
+
+`astro.config.mjs` needs the asset-bank CDN host allowlisted for `astro:assets`' remote-image support:
+
+```js
+export default defineConfig({
+  image: {
+    domains: ["ectropy-production-asset-bank.sfo3.cdn.digitaloceanspaces.com"],
+  },
+});
+```
+
+## Asset resolution
+
+`resolveAssetUrl(assetId, bankType, ext)` resolves an asset-bank `assetId` straight to its public CDN URL -- no runtime API call or credential, since the bucket is public-read and CDN-fronted. Registering a *new* asset (uploading bytes + writing the `asset_bank_records` row) is a separate, credentialed step (`Ectropy-Business/scripts/ingest-asset-bank.py`), out of scope for this package, which only renders assets that already exist.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@luhtech/site-visuals",
+  "version": "0.1.0",
+  "description": "Canonical visual package for LuhTech venture sites -- responsive hero images, numbered diagram figures, and article bylines, composing with @luhtech/site-template.",
+  "type": "module",
+  "license": "Apache-2.0",
+  "author": "LuhTech Holdings",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luh-tech/site-visuals.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./components/*": "./src/components/*",
+    "./lib/*": "./src/lib/*"
+  },
+  "scripts": {
+    "test": "node --experimental-strip-types --test test/*.test.mjs"
+  },
+  "peerDependencies": {
+    "astro": "^7.2",
+    "tailwindcss": "^4",
+    "@luhtech/site-template": ">=0.14.0"
+  },
+  "dependencies": {},
+  "luhtech": {
+    "schemaPins": {
+      "content/page.schema.json": "1.5.0"
+    }
+  }
+}

package/src/components/Byline.astro

@@ -0,0 +1,52 @@
+---
+// Author / date / reading time / series / market-cell label for an
+// article. Deliberately prop-driven, not schema-reading: article.schema.json
+// has no author/series/publishedAt fields today (checked live this
+// session -- that's real Phase 4 scope, not yet landed). This component
+// takes whatever the caller has and renders nothing for a field it lacks,
+// rather than inventing a placeholder -- so it's ready to wire to real
+// data the moment Phase 4 adds those fields, with no rewrite needed here.
+//
+// Reading time is always computed here from real bodyText, never accepted
+// as a stored prop -- matches the dispatch's own rule (Phase 4 item 2:
+// "reading time derived at render, never stored").
+import { readingTimeMinutes } from "../lib/readingTime.ts";
+import { formatPublishedDate } from "../lib/formatPublishedDate.ts";
+
+export interface Props {
+  author?: string;
+  /** ISO 8601 date string, e.g. "2026-09-09". */
+  publishedAt?: string;
+  series?: string;
+  /** 1-indexed position within `series`. Only rendered when `series` is also present. */
+  seriesOrdinal?: number;
+  /** Human-readable label, e.g. from a market-cell id via the site's own humanizeCellId() -- resolved by the caller, not here. */
+  marketCellLabel?: string;
+  bodyText: string;
+  class?: string;
+}
+
+const { author, publishedAt, series, seriesOrdinal, marketCellLabel, bodyText, class: className = "" } = Astro.props;
+
+const minutes = readingTimeMinutes(bodyText);
+
+const formattedDate = publishedAt ? formatPublishedDate(publishedAt) : undefined;
+
+const parts: string[] = [];
+if (author) parts.push(author);
+if (formattedDate) parts.push(formattedDate);
+if (minutes > 0) parts.push(`${minutes} min read`);
+if (series) parts.push(seriesOrdinal ? `${series} · ${seriesOrdinal}` : series);
+if (marketCellLabel) parts.push(marketCellLabel);
+---
+
+{parts.length > 0 && (
+  <p class:list={["text-sm text-ink/60 flex flex-wrap gap-x-2 gap-y-1", className]}>
+    {parts.map((p, i) => (
+      <Fragment>
+        {i > 0 && <span aria-hidden="true">&middot;</span>}
+        <span>{p}</span>
+      </Fragment>
+    ))}
+  </p>
+)}

package/src/components/DiagramFigure.astro

@@ -0,0 +1,25 @@
+---
+// Numbered/captioned wrapper around site-template's own Diagram.astro.
+// Deliberately named DiagramFigure, not Figure -- site-template already has
+// a Figure.astro that renders a DIFFERENT schema entity (section.figures[],
+// a cited-stat callout with required provenance), not section.diagrams[].
+// Reusing that name here would collide two different concepts under one
+// import path. This wraps rather than forks Diagram.astro so the three
+// real diagram renderers (RingComparison/VectorSum/DataLineChart) stay
+// owned in exactly one place.
+import Diagram from "@luhtech/site-template/components/Diagram.astro";
+
+export interface Props {
+  diagram: { diagramId: string; diagramType: string; caption?: string; data: any };
+  /** 1-indexed figure number for this page/article; omit to render with no "Figure N." prefix. */
+  number?: number;
+  class?: string;
+}
+
+const { diagram, number, class: className = "my-8" } = Astro.props;
+const captioned = number
+  ? { ...diagram, caption: diagram.caption ? `Figure ${number}. ${diagram.caption}` : `Figure ${number}` }
+  : diagram;
+---
+
+<Diagram diagram={captioned} class={className} />

package/src/components/Hero.astro

@@ -0,0 +1,104 @@
+---
+// A real, responsive photographic/illustrative hero -- AVIF/WebP/JPEG at
+// 768/1280/1920 via Astro's own built-in astro:assets <Picture> (remote
+// image support), not a hand-rolled srcset. site-template's own
+// sections/Hero.astro (the generic sectionKind:"hero" renderer) is
+// text-only and deliberately untouched by this package -- this component
+// is a standalone, directly-composed alternative a page reaches for when
+// its hero section has a real heroImage, the same opt-in-replacement
+// pattern Ectropy-Business's own marketing-site already uses for
+// SplashHero (imported and used directly in index.astro, not wired into
+// Section.astro's sectionKind dispatch table).
+//
+// Consuming site's astro.config.mjs must allowlist the asset-bank CDN host
+// for astro:assets' remote-image support:
+//   image: { domains: ["ectropy-production-asset-bank.sfo3.cdn.digitaloceanspaces.com"] }
+// -- astro:assets refuses to process a remote image from a non-allowlisted
+// host at build time; this is a real per-site config step, not automatic.
+import { Picture } from "astro:assets";
+import SectionHeading from "@luhtech/site-template/components/SectionHeading.astro";
+import CtaLink from "@luhtech/site-template/components/CtaLink.astro";
+import { resolveAssetUrl, type AssetExt, type BankType } from "../lib/resolveAssetUrl.ts";
+
+export interface Cta {
+  label: string;
+  href: string;
+  intent?: string;
+}
+
+export interface Props {
+  assetId: string;
+  bankType?: BankType;
+  ext?: AssetExt;
+  alt: string;
+  eyebrow?: string;
+  /** Optional: omit for a pure-image hero band with no text overlay (SectionHeading already renders nothing when heading is absent). */
+  heading?: string;
+  subheading?: string;
+  ctas?: Cta[];
+  /** CSS object-position value, e.g. "50% 30%" -- where the subject sits when the crop tightens. */
+  focalPoint?: string;
+  overlay?: "dark" | "light" | "none";
+}
+
+const {
+  assetId,
+  bankType = "image",
+  ext = "png",
+  alt,
+  eyebrow,
+  heading,
+  subheading,
+  ctas = [],
+  focalPoint = "50% 50%",
+  overlay = "dark",
+} = Astro.props;
+
+const src = resolveAssetUrl(assetId, bankType, ext);
+
+const OVERLAY_CLASS: Record<NonNullable<Props["overlay"]>, string> = {
+  dark: "bg-ink/55",
+  light: "bg-canvas/55",
+  none: "",
+};
+const TEXT_TONE_CLASS: Record<NonNullable<Props["overlay"]>, string> = {
+  dark: "text-canvas",
+  light: "text-ink",
+  none: "text-ink",
+};
+---
+
+<section class="relative overflow-hidden" data-reveal>
+  <div class="absolute inset-0 -z-10">
+    <Picture
+      src={src}
+      inferSize
+      widths={[768, 1280, 1920]}
+      sizes="100vw"
+      formats={["avif", "webp", "jpeg"]}
+      fallbackFormat="jpeg"
+      alt={alt}
+      loading="eager"
+      fetchpriority="high"
+      class="w-full h-full object-cover"
+      style={`object-position: ${focalPoint}`}
+    />
+    {overlay !== "none" && <div class:list={["absolute inset-0", OVERLAY_CLASS[overlay]]} aria-hidden="true" />}
+  </div>
+  <div class:list={["relative py-24 sm:py-32 px-6 max-w-4xl mx-auto", TEXT_TONE_CLASS[overlay]]}>
+    <SectionHeading
+      level="h1"
+      eyebrow={eyebrow}
+      heading={heading}
+      subheading={subheading}
+      headingClass="text-4xl sm:text-5xl leading-tight"
+      subheadingClass="text-lg"
+      class="mb-4"
+    />
+    {ctas.length > 0 && (
+      <div class="mt-6 flex gap-4 flex-wrap">
+        {ctas.map((c, i) => <CtaLink cta={c} variant={i === 0 ? "primary" : "secondary"} />)}
+      </div>
+    )}
+  </div>
+</section>

package/src/lib/formatPublishedDate.ts

@@ -0,0 +1,17 @@
+/**
+ * Formats a bare calendar date (no time-of-day meaning) for display.
+ * Always formats in UTC, never the runtime's local timezone -- a bare
+ * date string has no timezone of its own, and `new Date(dateString)`
+ * parses it as UTC midnight, so letting toLocaleDateString format in the
+ * local timezone silently shifts the displayed day backward for any
+ * timezone behind UTC. Found live this session: "2026-09-14" rendered as
+ * "September 13, 2026" on a build machine in UTC-7.
+ */
+export function formatPublishedDate(isoDate: string): string {
+  return new Date(isoDate).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+}

package/src/lib/readingTime.ts

@@ -0,0 +1,18 @@
+/**
+ * Reading time is derived at render from real body text, never stored on
+ * the content instance -- matches the GTM launch-surface dispatch's own
+ * rule for Byline (Phase 4, item 2: "reading time derived at render, never
+ * stored"). 200 words/minute is the commonly-cited average adult silent
+ * reading speed for prose (the figure most reading-time estimators, e.g.
+ * Medium's, converge on) -- not independently benchmarked here, named so a
+ * future revision has a real number to argue with instead of a bare magic
+ * constant.
+ */
+
+const WORDS_PER_MINUTE = 200;
+
+export function readingTimeMinutes(bodyText: string): number {
+  const words = bodyText.trim().split(/\s+/).filter(Boolean).length;
+  if (words === 0) return 0;
+  return Math.max(1, Math.round(words / WORDS_PER_MINUTE));
+}

package/src/lib/resolveAssetUrl.ts

@@ -0,0 +1,46 @@
+/**
+ * Resolves an asset-bank assetId to its real, public CDN URL. Deliberately
+ * has no runtime dependency on the asset-bank registration API or any
+ * credential: the bucket (ectropy-production-asset-bank) is public-read and
+ * CDN-fronted, and every real asset already in it follows this exact key
+ * convention -- confirmed live this session against 15 real objects and the
+ * identical hardcoded pattern already used in
+ * Ectropy-Business/apps/marketing-site/src/layouts/Layout.astro and
+ * src/pages/index.astro. This function makes that convention a single named
+ * place instead of a repeated string literal.
+ *
+ * The bucket name is portfolio-wide despite its "ectropy-production-*" name
+ * -- it holds hero images for every venture (hilja, jobsitecontrol, ohjaus,
+ * qullqa, raizal, replique, siltana, viiva, ectropy), co-located here per L4
+ * direction rather than a dedicated per-venture bucket.
+ */
+
+const ASSET_BANK_CDN_HOST = "ectropy-production-asset-bank.sfo3.cdn.digitaloceanspaces.com";
+
+const ASSET_ID_PATTERN = /^[a-z][a-z0-9-]*$/;
+
+export type BankType = "logo" | "image" | "icon" | "diagram";
+
+const BANK_TYPE_DIR: Record<BankType, string> = {
+  logo: "logo",
+  image: "image",
+  icon: "icon",
+  diagram: "diagram",
+};
+
+/**
+ * Matches asset-bank.schema.json's real mimeType enum
+ * (image/svg+xml, image/png, image/jpeg, image/webp, image/avif) and its
+ * MIME_TO_EXT mapping in Ectropy-Business/scripts/ingest-asset-bank.py.
+ */
+export type AssetExt = "svg" | "png" | "jpg" | "webp" | "avif";
+
+export function resolveAssetUrl(assetId: string, bankType: BankType, ext: AssetExt): string {
+  if (!ASSET_ID_PATTERN.test(assetId)) {
+    throw new Error(
+      `resolveAssetUrl: assetId ${JSON.stringify(assetId)} does not match asset-bank.schema.json's real assetId pattern ${ASSET_ID_PATTERN.source}`
+    );
+  }
+  const dir = BANK_TYPE_DIR[bankType];
+  return `https://${ASSET_BANK_CDN_HOST}/${dir}/${assetId}.${ext}`;
+}