imprensa 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## 0.1.0-alpha.0
+
+### Added
+
+- `imprensa()` Vite plugin: MDX, Ilha pages, Tailwind, prerender, sitemap, llms.txt
+- Docs UI: resizable sidebar, theme toggle, global search (Areia Dialog + MiniSearch)
+- `@ilha/store` for search `open` / `query` with `store.bind()` for `bind:open`
+- Shiki / twoslash build pipeline, dead-link rehype (optional)
+
+### Notes
+
+- Portaled search dialog uses a small DOM bridge (`search-portal-sync`) until Areia `portal={false}` or equivalent
+- `SearchOverlay` island is a no-op registry stub; real UI is `GlobalSearch` on `document.body`

package/README.md

@@ -0,0 +1,51 @@
+# imprensa
+
+Vite meta-plugin and runtime for **Ilha** + **Areia** documentation sites (MDX, Shiki, static prerender, docs chrome).
+
+## Install
+
+```bash
+bun add imprensa areia ilha @ilha/store @ilha/router lucide
+```
+
+Peer versions are listed in `package.json` — align `ilha`, `areia`, and `@ilha/store` with the starter template.
+
+## Use
+
+```ts
+// vite.config.ts
+import { imprensa } from "imprensa";
+
+export default defineConfig({
+  plugins: [imprensa({ contentDir: "src/content", hostname: "https://example.com" })],
+});
+```
+
+```ts
+// src/main.ts
+import { createImprensa } from "imprensa/runtime";
+
+void createImprensa().init();
+```
+
+See `templates/starter` in the [imprensa](https://github.com/ilhajs/imprensa) monorepo.
+
+## Exports
+
+| Subpath                | Role                                     |
+| ---------------------- | ---------------------------------------- |
+| `imprensa`             | Vite plugin                              |
+| `imprensa/runtime`     | `createImprensa`, theme, mount/hydrate   |
+| `imprensa/prerender`   | Static prerender entry                   |
+| `imprensa/mdx`         | Routes, search index, MDX render helpers |
+| `imprensa/components`  | Layout, sidebar, search triggers         |
+| `imprensa/doc`         | Doc toolbar, pager                       |
+| `imprensa/default.css` | Docs theme + Tailwind layers             |
+
+## Global search
+
+Search mounts on `document.body` from `createImprensa().init()`. State lives in `@ilha/store` (`searchOpen`, `searchQuery`). Triggers use `data-search-trigger` or ⌘K.
+
+## Alpha
+
+`0.1.x` is an **alpha** API — expect small breaking changes. Pin exact versions in production until `1.0`.

package/default.css

@@ -0,0 +1,239 @@
+@import "tailwindcss";
+@import "@shikijs/twoslash/style-rich.css";
+@plugin "@tailwindcss/typography";
+@plugin "areia";
+
+@source "./src/**/*.{ts,tsx}";
+
+@layer base {
+  * {
+    --areia-code-block-bg: var(--areia-surface-muted);
+    --shiki-dark-bg: var(--areia-code-block-bg) !important;
+    --twoslash-popup-bg: var(--areia-surface-elevated);
+    --twoslash-popup-color: var(--areia-text-default);
+    --twoslash-border-color: var(--areia-border);
+    --twoslash-docs-color: var(--areia-text-subtle);
+    --twoslash-popup-shadow: var(--areia-shadow-lg);
+  }
+
+  html,
+  body {
+    @apply m-0 bg-areia-background;
+  }
+
+  #app,
+  .imprensa-root,
+  .imprensa-root-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .imprensa-root {
+    flex: 1 1 auto;
+  }
+
+  .imprensa-root-main {
+    flex: 1 1 0;
+    margin: 0;
+  }
+
+  html:not([data-theme-ready]) body {
+    @apply invisible;
+  }
+
+  [data-ilha-slot],
+  [data-router-view] {
+    display: contents;
+  }
+
+  #imprensa-global-search-host[hidden] {
+    display: none;
+  }
+}
+
+@layer components {
+  /*
+   * Docs routes: one viewport (100dvh). Avoid 100vh min-height on body + 100dvh shell
+   * (mobile URL bar ≈ 50px page scroll under the sidebar).
+   */
+  html.imprensa-docs-layout {
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow: hidden;
+  }
+
+  html.imprensa-docs-layout body {
+    height: 100dvh;
+    max-height: 100dvh;
+    min-height: 0 !important;
+    overflow: hidden;
+  }
+
+  html.imprensa-docs-layout #app {
+    height: 100dvh;
+    max-height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  html.imprensa-docs-layout .imprensa-root {
+    flex: 1 1 0;
+    height: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  html.imprensa-docs-layout .imprensa-root-main {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .imprensa-docs-shell [data-slot="resizable"] {
+    height: 100%;
+    min-height: 0;
+  }
+
+  /* Areia sets overflow:hidden on panels — scroll happens on inner wrappers only. */
+  .imprensa-docs-shell .imprensa-docs-sidebar-panel[data-slot="resizable-panel"],
+  .imprensa-docs-shell .imprensa-docs-main-panel[data-slot="resizable-panel"] {
+    min-height: 0 !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .imprensa-docs-sidebar-panel {
+    @apply bg-areia-surface-elevated;
+  }
+
+  .imprensa-docs-sidebar-panel > * {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .imprensa-docs-main-scroll {
+    height: 100%;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .imprensa-tree-indent-0 {
+    @apply ml-0;
+  }
+  .imprensa-tree-indent-1 {
+    @apply ml-2;
+  }
+  .imprensa-tree-indent-2 {
+    @apply ml-4;
+  }
+  .imprensa-tree-indent-3 {
+    @apply ml-6;
+  }
+  .imprensa-tree-indent-4 {
+    @apply ml-8;
+  }
+  .imprensa-tree-indent-5 {
+    @apply ml-10;
+  }
+  .imprensa-tree-indent-6 {
+    @apply ml-12;
+  }
+
+  .prose :where(h1, h2, h3, h4, h5, h6) {
+    @apply font-semibold scroll-mt-20;
+  }
+
+  .prose
+    :is(h1, h2, h3, h4, h5, h6)
+    :where(a.heading-anchor):not(:where(.not-prose, .not-prose *)) {
+    color: var(--areia-text-strong) !important;
+    text-decoration: none !important;
+    text-decoration-line: none !important;
+  }
+
+  .prose
+    :is(h1, h2, h3, h4, h5, h6)
+    :where(a.heading-anchor:hover):not(:where(.not-prose, .not-prose *)) {
+    color: var(--areia-text-strong) !important;
+    text-decoration: underline !important;
+    text-decoration-line: underline !important;
+    text-underline-offset: 0.25rem;
+  }
+
+  .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
+    @apply rounded bg-areia-surface-muted px-1 py-0.5;
+  }
+
+  .prose :where(pre):not(:where(.not-prose, .not-prose *)) {
+    @apply my-5 h-auto max-w-full overflow-x-auto rounded-md border border-areia-border p-4 leading-snug;
+    background: var(--areia-code-block-bg) !important;
+  }
+
+  .prose :where(pre:not(.shiki) code):not(:where(.not-prose, .not-prose *)) {
+    @apply block min-w-max whitespace-pre bg-transparent leading-snug;
+  }
+
+  .prose :where(pre.shiki code, pre code span):not(:where(.not-prose, .not-prose *)) {
+    @apply bg-transparent leading-snug;
+  }
+
+  .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)),
+  .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)) code {
+    background-color: var(--areia-code-block-bg) !important;
+  }
+}
+
+@layer utilities {
+  .shiki {
+    @apply !overflow-x-auto !overflow-y-hidden !leading-snug;
+  }
+
+  .shiki code {
+    @apply block min-w-max overflow-visible border-0 bg-transparent p-0 leading-snug;
+  }
+
+  .shiki.twoslash,
+  .shiki.twoslash code {
+    overflow: visible !important;
+  }
+
+  .shiki .line {
+    @apply inline-block min-w-full leading-snug;
+  }
+
+  .shiki .highlighted,
+  .shiki .diff {
+    @apply -mx-4 px-4;
+  }
+
+  .twoslash-popup-code,
+  .twoslash-popup-code span {
+    @apply !bg-transparent;
+  }
+
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  html.dark .shiki,
+  html.dark .prose :where(pre.shiki):not(:where(.not-prose, .not-prose *)) {
+    background-color: var(--areia-code-block-bg) !important;
+  }
+
+  /* night-owl-light blue (#4876d6) on #fbfbfb fails ~4.19:1 — darken for WCAG AA */
+  html:not(.dark) .shiki.shiki-themes span[style*="4876D6"],
+  html:not(.dark) .shiki.shiki-themes span[style*="4876d6"] {
+    color: #3558a8 !important;
+  }
+}

package/dist/client-runtime-D7MhMWCo.d.mts

@@ -0,0 +1,45 @@
+import { a as ImprensaIslandRegistry, n as RouterLike } from "./prerender-core-DBi9ntWW.mjs";
+import { PrerenderArguments } from "vite-prerender-plugin";
+
+//#region src/core/shiki-types.d.ts
+/** Browser Shiki instance from `imprensa/shiki` virtual module. */
+type ImprensaShikiHighlighter = {
+  loadLanguage: (lang: string) => Promise<void>;
+  codeToHtml: (code: string, options: {
+    lang: string;
+    themes: {
+      light: string;
+      dark: string;
+    };
+  }) => string;
+};
+//#endregion
+//#region src/core/client-runtime.d.ts
+declare const shiki: Promise<ImprensaShikiHighlighter>;
+/** Overridden at app build time by the imprensa Vite plugin from `imprensa()` shiki.themes. */
+declare const shikiThemes: {
+  light: string;
+  dark: string;
+};
+declare const THEME_STORAGE_KEY = "imprensa:theme";
+declare function getStoredTheme(): "light" | "dark" | "system";
+declare function setStoredTheme(mode: "light" | "dark" | "system"): void;
+declare function applyThemeToHtml(isDark: boolean): void;
+declare function applyInitialTheme(): void;
+declare function mountOrHydrate(options: {
+  pageRouter?: RouterLike;
+  registry: ImprensaIslandRegistry;
+  dev?: boolean;
+  target?: string;
+  static?: boolean;
+}): (() => void) | undefined;
+declare function createImprensa(options?: {
+  dev?: boolean;
+  target?: string;
+  static?: boolean;
+}): {
+  init(): Promise<(() => void) | undefined>;
+  prerender(data?: PrerenderArguments): Promise<any>;
+};
+//#endregion
+export { getStoredTheme as a, shiki as c, createImprensa as i, shikiThemes as l, applyInitialTheme as n, mountOrHydrate as o, applyThemeToHtml as r, setStoredTheme as s, THEME_STORAGE_KEY as t };

package/dist/components/doc.d.mts

@@ -0,0 +1,2 @@
+import { a as DocToolbar, i as DocArticle, n as DocPager, r as getAdjacentDocs, t as DocNavItem } from "../doc-pager-D-YhwEQN.mjs";
+export { DocArticle, type DocNavItem, DocPager, DocToolbar, getAdjacentDocs };

package/dist/components/doc.mjs

@@ -0,0 +1,2 @@
+import { i as getAdjacentDocs, n as DocToolbar, r as DocPager, t as DocArticle } from "../doc-toolbar-DUQS2gnK.mjs";
+export { DocArticle, DocPager, DocToolbar, getAdjacentDocs };

package/dist/components/icons.d.mts

@@ -0,0 +1,23 @@
+import { n as ImprensaSocialService } from "../socials-BIszPk-A.mjs";
+import { RawHtml } from "ilha";
+
+//#region src/components/icons.d.ts
+/** Social brand icon — `icon` matches `imprensa({ socials })` `service` values. */
+declare function Icon(props: {
+  icon: ImprensaSocialService;
+  class?: string;
+}): RawHtml;
+/** @deprecated Use `<Icon icon="github" />` from `imprensa/icons`. */
+declare function GithubIcon(props: {
+  class?: string;
+}): RawHtml;
+/** @deprecated Use `<Icon icon="x" />`. */
+declare function XIcon(props: {
+  class?: string;
+}): RawHtml;
+/** @deprecated Use `<Icon icon="discord" />`. */
+declare function DiscordIcon(props: {
+  class?: string;
+}): RawHtml;
+//#endregion
+export { DiscordIcon, GithubIcon, Icon, type ImprensaSocialService, XIcon };

package/dist/components/icons.mjs

@@ -0,0 +1,40 @@
+import { raw } from "ilha";
+//#region src/components/icons.tsx
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function svg(className, path) {
+	return raw(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"${className ? ` class="${escapeAttribute(className)}"` : ""}><path d="${path}"/></svg>`);
+}
+const PATHS = {
+	github: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z",
+	x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+	discord: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+};
+/** Social brand icon — `icon` matches `imprensa({ socials })` `service` values. */
+function Icon(props) {
+	return svg(props.class, PATHS[props.icon]);
+}
+/** @deprecated Use `<Icon icon="github" />` from `imprensa/icons`. */
+function GithubIcon(props) {
+	return Icon({
+		icon: "github",
+		class: props.class
+	});
+}
+/** @deprecated Use `<Icon icon="x" />`. */
+function XIcon(props) {
+	return Icon({
+		icon: "x",
+		class: props.class
+	});
+}
+/** @deprecated Use `<Icon icon="discord" />`. */
+function DiscordIcon(props) {
+	return Icon({
+		icon: "discord",
+		class: props.class
+	});
+}
+//#endregion
+export { DiscordIcon, GithubIcon, Icon, XIcon };

package/dist/components/index.d.mts

@@ -0,0 +1,33 @@
+import { a as DocToolbar, i as DocArticle, n as DocPager, r as getAdjacentDocs, t as DocNavItem } from "../doc-pager-D-YhwEQN.mjs";
+import { searchDocuments } from "imprensa/mdx";
+
+//#region src/components/search.d.ts
+declare function LogoButton(): import("ilha/jsx-runtime").JSX.Element;
+declare const ThemeToggle: import("ilha").Island<Record<string, unknown>, Omit<Record<never, never>, K> & Record<"mode", "system" | "light" | "dark">>;
+/**
+ * @deprecated Replaced by `GlobalSearch` (body-mounted in `createImprensa().init()`).
+ * Kept so the vite plugin island registry stays stable.
+ */
+declare const SearchOverlay: import("ilha").Island<Record<string, unknown>, Record<never, never>>;
+declare function SearchSidebarTrigger(): import("ilha/jsx-runtime").JSX.Element;
+declare function SearchNavbarTrigger(): import("ilha/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/components/sidebar.d.ts
+declare const Sidebar: import("ilha").Island<Record<string, unknown>, Record<never, never>>;
+//#endregion
+//#region src/components/layout.d.ts
+declare const RootLayout: import("@ilha/router").LayoutHandler;
+declare const ContentLayout: import("@ilha/router").LayoutHandler;
+//#endregion
+//#region src/components/preview.d.ts
+declare const Preview: import("ilha").Island<{
+  code64: string;
+}, Record<never, never>>;
+//#endregion
+//#region src/components/snippet.d.ts
+declare const Snippet: import("ilha").Island<{
+  code: string;
+  lang: string;
+}, Record<never, never>>;
+//#endregion
+export { ContentLayout, DocArticle, type DocNavItem, DocPager, DocToolbar, LogoButton, Preview, RootLayout, SearchNavbarTrigger, SearchOverlay, SearchSidebarTrigger, Sidebar, Snippet, ThemeToggle, getAdjacentDocs };