docmedown 0.1.7 → 0.1.9

package/dist/types/runtime/components/Builtins.d.ts

@@ -1,34 +1,102 @@
 import React from "react";
+/**
+ * Universal `<Item>` resolution context.
+ *
+ * Container components that render a paired "child" (Timeline→TimelineItem,
+ * Accordion→AccordionItem, Columns→Column, Steps→Step, CardGrid→Card) provide
+ * this context around their children. A bare `<Item>` reads the nearest
+ * provider and renders as that container's designated child, forwarding all
+ * props — so `<Timeline><Item title="…"/></Timeline>` behaves exactly like
+ * `<TimelineItem title="…"/>`, regardless of how deeply the Item is nested.
+ *
+ * With no provider up the tree, `<Item>` degrades to an `<li>` (the child of
+ * an unordered list), so it works as a generic list item anywhere.
+ */
+export type ItemParentKind = "timeline" | "accordion" | "columns" | "steps" | "cardgrid" | "tabs";
+export interface ItemParentContextValue {
+    kind: ItemParentKind;
+    /** 1-based position, used by `Steps` to auto-number. */
+    index?: number;
+}
+export declare const ItemParentContext: React.Context<ItemParentContextValue | null>;
+export type TabsType = "recessed" | "underline" | "pills" | "postit";
 export interface TabsProps {
     children?: React.ReactNode;
     defaultIndex?: number;
     groupId?: string;
+    /** Visual treatment. `recessed` (default) renders inset/recessed tab buttons.
+        Also accepts `underline`, `pills`, or `postit`. */
+    type?: TabsType;
+    /** Legacy alias for `type` (`underline` | `pills`); kept for backward compat. */
+    variant?: "underline" | "pills";
 }
 export interface TabItemProps {
-    label: string;
+    label?: string;
     value?: string;
     icon?: React.ReactNode;
     children: React.ReactNode;
 }
 export declare const Tabs: React.FC<TabsProps>;
 export declare const Tab: React.FC<TabItemProps>;
+export type CardColor = "blue" | "green" | "violet" | "amber" | "red" | "neutral";
 export interface CardProps {
-    title: string;
+    title?: string;
     description?: string;
     href?: string;
     icon?: React.ReactNode | string;
+    image?: string;
+    imageAlt?: string;
     badge?: string;
-    badgeType?: "info" | "success" | "warning" | "new";
+    badgeType?: "info" | "success" | "warning" | "new" | "danger" | "neutral";
+    footer?: React.ReactNode;
+    /** Named accent variant or any CSS color (hex/rgb/var(...)) applied as the card accent. */
+    color?: CardColor | string;
+    /** Soft drop shadow — enabled by default. */
+    shadow?: boolean;
     children?: React.ReactNode;
 }
 export declare const Card: React.FC<CardProps>;
 export interface CardGridProps {
     cols?: 1 | 2 | 3 | 4;
+    /**
+     * Max visible cards in carousel mode (when cards outnumber `cols`).
+     * Defaults to `cols` and auto-shrinks when space is tight (mobile → 1).
+     */
+    carouselCols?: 1 | 2 | 3 | 4;
     children: React.ReactNode;
 }
+/** Clamp a column count into the supported 1–4 range. */
+export declare function clampCarouselCols(value: unknown, fallback: number): number;
+/**
+ * Resolve how many cards fit side-by-side in the carousel viewport.
+ * `maxPerView` is the `carouselCols` cap; narrow containers shrink below it
+ * (mobile-first) so a `carouselCols={2}` grid still shows 1 card on phones.
+ */
+export declare function resolveCarouselPerView(maxPerView: number, containerWidth: number): number;
+/** Normalize any card index into the `0 … total-1` loop range. */
+export declare function normalizeLoopIndex(index: number, total: number): number;
+/** Clone ranges that make the loop seamless: last N before, first N after. */
+export declare function buildLoopRange(total: number, perView: number): {
+    leading: number[];
+    trailing: number[];
+};
+/**
+ * Sliding-window math for the CardGrid carousel. The window shows `perView`
+ * consecutive cards and cycles with wrap-around; there are
+ * `total - perView + 1` positions and every window stays full (cards from the
+ * end wrap to the front circularly).
+ */
+export declare function carouselWindow(total: number, perView: number, start: number): {
+    positions: number;
+    index: number;
+    indices: number[];
+};
 export declare const CardGrid: React.FC<CardGridProps>;
 export interface BadgeProps {
-    type?: "info" | "success" | "warning" | "danger" | "new";
+    type?: "info" | "success" | "warning" | "danger" | "new" | "neutral";
+    pill?: boolean;
+    dot?: boolean;
+    icon?: React.ReactNode;
     children: React.ReactNode;
 }
 export declare const Badge: React.FC<BadgeProps>;
@@ -42,3 +110,80 @@ export interface StepProps {
     children: React.ReactNode;
 }
 export declare const Step: React.FC<StepProps>;
+export type AlertType = "note" | "tip" | "important" | "warning" | "caution" | "info" | "success" | "danger";
+export interface AlertProps {
+    type?: AlertType;
+    title?: string;
+    children?: React.ReactNode;
+}
+export declare const Alert: React.FC<AlertProps>;
+/** Alias of <Alert> for Markdown-familiar authoring. */
+export declare const Callout: React.FC<AlertProps>;
+export interface ButtonProps {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    href?: string;
+    external?: boolean;
+    block?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    loading?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+export interface KbdProps {
+    keys?: string;
+    children: React.ReactNode;
+}
+export declare const Kbd: React.FC<KbdProps>;
+export interface DetailsProps {
+    summary: string;
+    open?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Details: React.FC<DetailsProps>;
+export interface AccordionProps {
+    children: React.ReactNode;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export interface AccordionItemProps {
+    title: string;
+    defaultOpen?: boolean;
+    children?: React.ReactNode;
+}
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export interface ColumnsProps {
+    cols?: 2 | 3 | 4;
+    /** Visual treatment for each column. `normal` (default) is borderless/flush. */
+    type?: "normal" | "card" | "recessed" | "neon";
+    children: React.ReactNode;
+}
+export declare const Columns: React.FC<ColumnsProps>;
+export interface ColumnProps {
+    children?: React.ReactNode;
+}
+export declare const Column: React.FC<ColumnProps>;
+export interface TimelineProps {
+    children: React.ReactNode;
+}
+export declare const Timeline: React.FC<TimelineProps>;
+export interface TimelineItemProps {
+    title: string;
+    subtitle?: string;
+    children?: React.ReactNode;
+}
+export declare const TimelineItem: React.FC<TimelineItemProps>;
+export interface ItemProps {
+    [key: string]: any;
+    children?: React.ReactNode;
+}
+/**
+ * Universal child element. Reads the nearest {@link ItemParentContext} and
+ * renders as that container's designated child — TimelineItem, AccordionItem,
+ * Column, Step (auto-numbered), or Card — forwarding every prop. With no
+ * container ancestor, it renders as an `<li>` (the child of an unordered list).
+ */
+export declare const Item: React.FC<ItemProps>;

package/dist/types/runtime/markdown/component-body.d.ts

@@ -0,0 +1,7 @@
+export declare function restoreFencePlaceholders(html: string, fences: string[]): string;
+export declare function processComponentBodies(src: string): {
+    html: string;
+    fences: string[];
+};
+export declare function expandSelfClosingComponents(html: string): string;
+export declare function unwrapBlockComponents(html: string): string;

package/dist/types/runtime/markdown/highlighter.d.ts

@@ -14,6 +14,24 @@ import "prismjs/components/prism-go";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-docker";
 import "prismjs/components/prism-diff";
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-cpp";
+import "prismjs/components/prism-csharp";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-kotlin";
+import "prismjs/components/prism-swift";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-toml";
+import "prismjs/components/prism-ini";
+import "prismjs/components/prism-nginx";
+import "prismjs/components/prism-graphql";
+import "prismjs/components/prism-http";
+import "prismjs/components/prism-dart";
+import "prismjs/components/prism-scala";
+export declare function normalizeLanguage(lang: string): string;
+export declare function registerLanguage(name: string, definition: Record<string, unknown>): void;
 export declare function highlightCode(code: string, lang?: string): string;
 export declare function escapeHtml(str: string): string;
 export declare function renderCodeBlock(code: string, infoString?: string): string;

package/dist/types/runtime/markdown/renderer.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import React from "react";
 interface MarkdownRendererProps {
     html: string;
     onNavigate?: (slug: string, anchor: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docmedown",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "The simplest MarkDown documenter yet. CLI & Web Script React SPA documentation engine.",
   "main": "./dist/docmedown.cjs",
   "module": "./dist/docmedown.mjs",
@@ -49,6 +49,7 @@
     "test": "npx tsx --test tests/parser.test.ts tests/scanner.test.ts tests/theme-schema.test.ts tests/runtime-integration.test.ts tests/package-smoke.test.ts tests/hosting.test.ts tests/deploy.test.ts tests/home.test.ts",
     "test:artifacts": "npx tsx --test tests/offline-artifact.test.ts",
     "test:release": "npm run typecheck && npm run lint && npm run test && npm run build && npm run build:docs && npm run test:artifacts && npm pack --dry-run",
+    "login": "npm login",
     "deploy": "node ./scripts/deploy.mjs",
     "deploy:dry-run": "npm run deploy -- --dry-run",
     "prepublishOnly": "npm run test:release"

package/templates/guides/custom-components.md

@@ -62,6 +62,13 @@ DocMeDown comes with built-in interactive components ready to use:
 
 ### Feature Card Grid
 
+Cards can be fully prop-driven (self-closing) or container-style with arbitrary
+Markdown/HTML bodies. `title` is optional; `color` accepts a named variant
+(`blue`, `green`, `violet`, `amber`, `red`, `neutral`) or any CSS color, and
+`shadow={false}` opts out of the default drop shadow. Grids containing more
+cards than columns automatically become a carousel with prev/next controls,
+position dots, and wrap-around cycling.
+
 ```html
 <CardGrid cols={2}>
   <Card
@@ -78,3 +85,16 @@ DocMeDown comes with built-in interactive components ready to use:
   />
 </CardGrid>
 ```
+
+Container-style card with a Markdown body:
+
+```html
+<Card color="blue" title="Quick start">
+  Install with **npm**, then write Markdown:
+
+  - zero config
+  - hot reload
+
+  <Badge type="success">STABLE</Badge>
+</Card>
+```