vocs 2.0.0-rc.3 → 2.0.0

package/dist/react/Callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../src/react/Callout.tsx"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,2CAe3C;AAED,MAAM,CAAC,OAAO,WAAW,OAAO,CAAC;IAC/B,KAAY,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;QAC1C,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;KACpE,CAAC,CAAA;CACH"}
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../src/react/Callout.tsx"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,2CAwB3C;AAED,MAAM,CAAC,OAAO,WAAW,OAAO,CAAC;IAC/B,KAAY,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;QAC1C,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;KACpE,CAAC,CAAA;CACH"}

package/dist/react/Callout.js

@@ -4,7 +4,8 @@ import LucideInfo from '~icons/lucide/info';
 import LucideLightbulb from '~icons/lucide/lightbulb';
 import LucideTriangleAlert from '~icons/lucide/triangle-alert';
 export function Callout(props) {
-    const { variant, ...rest } = props;
-    return (_jsxs("aside", { ...rest, "data-v": true, "data-v-callout": true, "data-v-content": true, "data-v-context": variant, children: [_jsxs("div", { "data-v-callout-icon": true, children: [props.variant === 'note' ? _jsx(LucideInfo, {}) : null, props.variant === 'info' ? _jsx(LucideInfo, {}) : null, props.variant === 'warning' ? _jsx(LucideTriangleAlert, {}) : null, props.variant === 'danger' ? _jsx(LucideTriangleAlert, {}) : null, props.variant === 'tip' ? _jsx(LucideLightbulb, {}) : null, props.variant === 'success' ? _jsx(LucideCircleCheck, {}) : null] }), props.children] }));
+    const { children, variant, ...rest } = props;
+    const content = typeof children === 'string' || typeof children === 'number' ? (_jsx("div", { "data-v-callout-content": true, "data-v-content": true, children: children })) : (children);
+    return (_jsxs("aside", { ...rest, "data-v": true, "data-v-callout": true, "data-v-content": true, "data-v-context": variant, children: [_jsxs("div", { "data-v-callout-icon": true, children: [props.variant === 'note' ? _jsx(LucideInfo, {}) : null, props.variant === 'info' ? _jsx(LucideInfo, {}) : null, props.variant === 'warning' ? _jsx(LucideTriangleAlert, {}) : null, props.variant === 'danger' ? _jsx(LucideTriangleAlert, {}) : null, props.variant === 'tip' ? _jsx(LucideLightbulb, {}) : null, props.variant === 'success' ? _jsx(LucideCircleCheck, {}) : null] }), content] }));
 }
 //# sourceMappingURL=Callout.js.map

package/dist/react/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../../src/react/Callout.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAC1D,OAAO,UAAU,MAAM,oBAAoB,CAAA;AAC3C,OAAO,eAAe,MAAM,yBAAyB,CAAA;AACrD,OAAO,mBAAmB,MAAM,8BAA8B,CAAA;AAE9D,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAClC,OAAO,CACL,oBAAW,IAAI,oFAAuD,OAAO,aAC3E,uDACG,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAChD,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAChD,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,IAAI,EACpD,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,IAAI,IACvD,EACL,KAAK,CAAC,QAAQ,IACT,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"Callout.js","sourceRoot":"","sources":["../../src/react/Callout.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAC1D,OAAO,UAAU,MAAM,oBAAoB,CAAA;AAC3C,OAAO,eAAe,MAAM,yBAAyB,CAAA;AACrD,OAAO,mBAAmB,MAAM,8BAA8B,CAAA;AAE9D,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC5C,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7D,gFACG,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAA;IAEH,OAAO,CACL,oBAAW,IAAI,oFAAuD,OAAO,aAC3E,uDACG,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAChD,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAChD,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,IAAI,EACpD,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,IAAI,IACvD,EACL,OAAO,IACF,CACT,CAAA;AACH,CAAC"}

package/dist/waku/internal/routes/_api/api/og.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"og.d.ts","sourceRoot":"","sources":["../../../../../../src/waku/internal/routes/_api/api/og.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,OAAO,EAAE,OAAO,qBA4D/C"}
+{"version":3,"file":"og.d.ts","sourceRoot":"","sources":["../../../../../../src/waku/internal/routes/_api/api/og.tsx"],"names":[],"mappings":"AAwBA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,OAAO,EAAE,OAAO,qBAoH/C"}

package/dist/waku/internal/routes/_api/api/og.js

@@ -2,38 +2,63 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Handler from '../../../../../server/handlers.js';
 const colors = {
     background: '#161616',
+    pattern: '#202020',
     text: '#ffffff',
     textMuted: 'rgba(255, 255, 255, 0.6)',
 };
+const dimensions = {
+    height: 630,
+    width: 1200,
+};
+const patternStep = 56;
+const diagonalOffsets = Array.from({ length: Math.ceil((dimensions.width + dimensions.height * 2) / patternStep) }, (_, index) => index * patternStep - dimensions.height);
+const reverseDiagonalOffsets = Array.from({ length: Math.ceil((dimensions.width + dimensions.height * 2) / patternStep) }, (_, index) => index * patternStep);
 export default function handler(request) {
-    return Handler.og(({ title, description, logo }) => (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            width: '100%',
-            height: '100%',
-            padding: 80,
-            backgroundColor: colors.background,
-            color: colors.text,
-        }, children: [logo && (_jsx("img", { alt: "", src: logo, style: {
-                    height: 48,
-                    position: 'absolute',
-                    right: 40,
-                    bottom: 40,
-                } })), _jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 12,
-                }, children: [_jsx("div", { style: {
-                            fontSize: title.length < 15 ? 80 : 64,
-                            fontWeight: 700,
-                            lineHeight: 1.1,
-                            color: colors.text,
-                        }, children: title }), description && (_jsx("div", { style: {
-                            fontSize: 28,
-                            color: colors.textMuted,
-                            maxWidth: 800,
-                        }, children: description }))] })] }))).fetch(request);
+    return Handler.og(({ title, description, logo }) => {
+        const titleLines = title.split('\n');
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden',
+                backgroundColor: colors.background,
+                color: colors.text,
+            }, children: [_jsx("div", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                    }, children: _jsxs("svg", { "aria-hidden": true, width: dimensions.width, height: dimensions.height, viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, fill: "none", children: [_jsx("title", { children: "Background pattern" }), diagonalOffsets.map((offset) => (_jsx("line", { x1: offset, y1: 0, x2: offset + dimensions.height, y2: dimensions.height, stroke: colors.pattern, strokeWidth: 1.5 }, `diagonal-${offset}`))), reverseDiagonalOffsets.map((offset) => (_jsx("line", { x1: offset, y1: 0, x2: offset - dimensions.height, y2: dimensions.height, stroke: colors.pattern, strokeWidth: 1.5 }, `reverse-diagonal-${offset}`)))] }) }), logo && (_jsx("img", { alt: "", src: logo, style: {
+                        height: 48,
+                        position: 'absolute',
+                        right: 40,
+                        bottom: 40,
+                    } })), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 12,
+                        position: 'relative',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                        padding: 80,
+                    }, children: [_jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                fontSize: title.length < 15 ? 80 : 64,
+                                fontWeight: 700,
+                                lineHeight: 1.1,
+                                color: colors.text,
+                            }, children: titleLines.map((line) => (_jsx("div", { children: line }, line))) }), description && (_jsx("div", { style: {
+                                fontSize: 28,
+                                color: colors.textMuted,
+                                maxWidth: 800,
+                            }, children: description }))] })] }));
+    }).fetch(request);
 }
 //# sourceMappingURL=og.js.map

package/dist/waku/internal/routes/_api/api/og.js.map

@@ -1 +1 @@
-{"version":3,"file":"og.js","sourceRoot":"","sources":["../../../../../../src/waku/internal/routes/_api/api/og.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,OAAO,MAAM,mCAAmC,CAAA;AAE5D,MAAM,MAAM,GAAG;IACb,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,0BAA0B;CACtC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,OAAgB;IAC9C,OAAO,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAClD,eACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,YAAY;YACxB,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,EAAE;YACX,eAAe,EAAE,MAAM,CAAC,UAAU;YAClC,KAAK,EAAE,MAAM,CAAC,IAAI;SACnB,aAEA,IAAI,IAAI,CACP,cACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,IAAI,EACT,KAAK,EAAE;oBACL,MAAM,EAAE,EAAE;oBACV,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;iBACX,GACD,CACH,EAED,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,GAAG,EAAE,EAAE;iBACR,aAED,cACE,KAAK,EAAE;4BACL,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;4BACrC,UAAU,EAAE,GAAG;4BACf,UAAU,EAAE,GAAG;4BACf,KAAK,EAAE,MAAM,CAAC,IAAI;yBACnB,YAEA,KAAK,GACF,EAEL,WAAW,IAAI,CACd,cACE,KAAK,EAAE;4BACL,QAAQ,EAAE,EAAE;4BACZ,KAAK,EAAE,MAAM,CAAC,SAAS;4BACvB,QAAQ,EAAE,GAAG;yBACd,YAEA,WAAW,GACR,CACP,IACG,IACF,CACP,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AACnB,CAAC"}
+{"version":3,"file":"og.js","sourceRoot":"","sources":["../../../../../../src/waku/internal/routes/_api/api/og.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vocs",
   "type": "module",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "license": "MIT",
   "repository": {
@@ -85,7 +85,7 @@
     "zod": "^4.3.5"
   },
   "peerDependencies": {
-    "@vocs/twoslash-rust": "^0.1.0-rc.0",
+    "@vocs/twoslash-rust": "^0.1.0",
     "mermaid": "^11",
     "react": "^19",
     "react-dom": "^19",

package/src/react/Callout.tsx

@@ -4,7 +4,16 @@ import LucideLightbulb from '~icons/lucide/lightbulb'
 import LucideTriangleAlert from '~icons/lucide/triangle-alert'
 
 export function Callout(props: Callout.Props) {
-  const { variant, ...rest } = props
+  const { children, variant, ...rest } = props
+  const content =
+    typeof children === 'string' || typeof children === 'number' ? (
+      <div data-v-callout-content data-v-content>
+        {children}
+      </div>
+    ) : (
+      children
+    )
+
   return (
     <aside {...rest} data-v data-v-callout data-v-content data-v-context={variant}>
       <div data-v-callout-icon>
@@ -15,7 +24,7 @@ export function Callout(props: Callout.Props) {
         {props.variant === 'tip' ? <LucideLightbulb /> : null}
         {props.variant === 'success' ? <LucideCircleCheck /> : null}
       </div>
-      {props.children}
+      {content}
     </aside>
   )
 }

package/src/waku/internal/routes/_api/api/og.tsx

@@ -2,68 +2,140 @@ import * as Handler from '../../../../../server/handlers.js'
 
 const colors = {
   background: '#161616',
+  pattern: '#202020',
   text: '#ffffff',
   textMuted: 'rgba(255, 255, 255, 0.6)',
 }
 
+const dimensions = {
+  height: 630,
+  width: 1200,
+}
+
+const patternStep = 56
+const diagonalOffsets = Array.from(
+  { length: Math.ceil((dimensions.width + dimensions.height * 2) / patternStep) },
+  (_, index) => index * patternStep - dimensions.height,
+)
+const reverseDiagonalOffsets = Array.from(
+  { length: Math.ceil((dimensions.width + dimensions.height * 2) / patternStep) },
+  (_, index) => index * patternStep,
+)
+
 export default function handler(request: Request) {
-  return Handler.og(({ title, description, logo }) => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        padding: 80,
-        backgroundColor: colors.background,
-        color: colors.text,
-      }}
-    >
-      {logo && (
-        <img
-          alt=""
-          src={logo}
-          style={{
-            height: 48,
-            position: 'absolute',
-            right: 40,
-            bottom: 40,
-          }}
-        />
-      )}
+  return Handler.og(({ title, description, logo }) => {
+    const titleLines = title.split('\n')
 
+    return (
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: 12,
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          backgroundColor: colors.background,
+          color: colors.text,
         }}
       >
         <div
           style={{
-            fontSize: title.length < 15 ? 80 : 64,
-            fontWeight: 700,
-            lineHeight: 1.1,
-            color: colors.text,
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
           }}
         >
-          {title}
+          <svg
+            aria-hidden
+            width={dimensions.width}
+            height={dimensions.height}
+            viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+            fill="none"
+          >
+            <title>Background pattern</title>
+            {diagonalOffsets.map((offset) => (
+              <line
+                key={`diagonal-${offset}`}
+                x1={offset}
+                y1={0}
+                x2={offset + dimensions.height}
+                y2={dimensions.height}
+                stroke={colors.pattern}
+                strokeWidth={1.5}
+              />
+            ))}
+            {reverseDiagonalOffsets.map((offset) => (
+              <line
+                key={`reverse-diagonal-${offset}`}
+                x1={offset}
+                y1={0}
+                x2={offset - dimensions.height}
+                y2={dimensions.height}
+                stroke={colors.pattern}
+                strokeWidth={1.5}
+              />
+            ))}
+          </svg>
         </div>
 
-        {description && (
+        {logo && (
+          <img
+            alt=""
+            src={logo}
+            style={{
+              height: 48,
+              position: 'absolute',
+              right: 40,
+              bottom: 40,
+            }}
+          />
+        )}
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+            position: 'relative',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+            padding: 80,
+          }}
+        >
           <div
             style={{
-              fontSize: 28,
-              color: colors.textMuted,
-              maxWidth: 800,
+              display: 'flex',
+              flexDirection: 'column',
+              fontSize: title.length < 15 ? 80 : 64,
+              fontWeight: 700,
+              lineHeight: 1.1,
+              color: colors.text,
             }}
           >
-            {description}
+            {titleLines.map((line) => (
+              <div key={line}>{line}</div>
+            ))}
           </div>
-        )}
+
+          {description && (
+            <div
+              style={{
+                fontSize: 28,
+                color: colors.textMuted,
+                maxWidth: 800,
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  )).fetch(request)
+    )
+  }).fetch(request)
 }