@astryxdesign/cli 0.7.13-canary.a5ad1f2 → 0.7.13-canary.fd5cf0d

package/api/component/__fixtures__/resolutions/modules.txt

@@ -257,7 +257,7 @@ useChatPasteAsToken useChatPasteAsToken Chat/Chat.doc.mjs Chat/useChatPasteAsTok
 useChatStreamScroll useChatStreamScroll Chat/Chat.doc.mjs Chat/useChatStreamScroll.ts
 useCloseMobileDrawerOnActivate useCloseMobileDrawerOnActivate AppShell/AppShell.doc.mjs AppShell/useCloseMobileDrawerOnActivate.ts
 useComponentTranslator useComponentTranslator i18n/InternationalizationProvider.doc.mjs i18n/useComponentTranslator.ts
-useDirection useDirection i18n/InternationalizationProvider.doc.mjs i18n/useDirection.ts
+useDirection useDirection i18n/useDirection.doc.mjs i18n/useDirection.ts
 useDrawerDialogPresence useDrawerDialogPresence Drawer/Drawer.doc.mjs Drawer/useDrawerDialogPresence.ts
 useEndLaneReserve useEndLaneReserve Tokenizer/Tokenizer.doc.mjs Tokenizer/useEndLaneReserve.ts
 useFieldStatusAnnouncement useFieldStatusAnnouncement FieldStatus/FieldStatus.doc.mjs FieldStatus/useFieldStatusAnnouncement.ts

package/assets/templates/blocks/components/InternationalizationProvider/InternationalizationProvider04Calendar.doc.mjs

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'InternationalizationProvider',
+  name: 'InternationalizationProvider — Calendar',
+  displayName: 'Internationalization Provider — Calendar',
+  description:
+    'Set the `calendar` prop and the `Calendar` and `DateInput` inside the provider show that calendar system. The value stays a Gregorian ISO date. Japanese and Buddhist dates work in every browser; calendars such as Persian or Hebrew also need `Temporal` or a polyfill.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'InternationalizationProvider',
+    'Calendar',
+    'DateInput',
+    'SegmentedControl',
+    'Layout',
+    'Text',
+  ],
+};

package/assets/templates/blocks/components/InternationalizationProvider/InternationalizationProvider04Calendar.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import {Calendar, type ISODateString} from '@astryxdesign/core/Calendar';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {VStack} from '@astryxdesign/core/Layout';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+import {Text} from '@astryxdesign/core/Text';
+
+type CalendarSystem = 'gregory' | 'japanese' | 'buddhist';
+
+export default function InternationalizationProviderCalendar() {
+  const [calendar, setCalendar] = useState<CalendarSystem>('japanese');
+  const [value, setValue] = useState<ISODateString | undefined>('2026-10-30');
+  return (
+    <InternationalizationProvider locale="en" calendar={calendar}>
+      <VStack gap={4} hAlign="center">
+        <SegmentedControl
+          label="Calendar"
+          value={calendar}
+          onChange={next => setCalendar(next as CalendarSystem)}
+          size="sm">
+          <SegmentedControlItem value="gregory" label="Gregorian" />
+          <SegmentedControlItem value="japanese" label="Japanese" />
+          <SegmentedControlItem value="buddhist" label="Buddhist" />
+        </SegmentedControl>
+        <DateInput
+          label="Start date"
+          value={value}
+          onChange={setValue}
+          controlStyle={{width: 300}}
+        />
+        <Calendar value={value ?? null} onChange={next => setValue(next)} />
+        <Text type="supporting" color="secondary">
+          {value ? `Value: ${value}` : 'No date'}
+        </Text>
+      </VStack>
+    </InternationalizationProvider>
+  );
+}

package/assets/templates/blocks/components/InternationalizationProvider/useDirectionHookUsage.doc.mjs

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useDirection',
+  name: 'useDirection — Hook Usage',
+  displayName: 'useDirection — Hook Usage',
+  description:
+    'Demonstrates reading ambient text direction during render to draw a direction-aware canvas sparkline whose time axis runs from the logical inline start edge.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'InternationalizationProvider',
+    'SegmentedControl',
+    'Layout',
+  ],
+};

package/assets/templates/blocks/components/InternationalizationProvider/useDirectionHookUsage.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useEffect, useRef, useState} from 'react';
+import {InternationalizationProvider, useDirection} from '@astryxdesign/core';
+import {VStack} from '@astryxdesign/core/Layout';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+
+const DATA_POINTS = [10, 25, 18, 40, 32, 60, 48, 75];
+
+function Sparkline() {
+  const direction = useDirection();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+
+    const width = canvas.width;
+    const height = canvas.height;
+    ctx.clearRect(0, 0, width, height);
+
+    const step = width / (DATA_POINTS.length - 1);
+    const maxVal = Math.max(...DATA_POINTS);
+    const minVal = Math.min(...DATA_POINTS);
+    const range = maxVal - minVal || 1;
+
+    ctx.beginPath();
+    ctx.strokeStyle = '#0064e0';
+    ctx.lineWidth = 2;
+
+    DATA_POINTS.forEach((val, i) => {
+      // In LTR: oldest data starts at 0 (left), newest at right.
+      // In RTL: oldest data starts at right (width), newest at left.
+      const x = direction === 'rtl' ? width - i * step : i * step;
+      const y = height - ((val - minVal) / range) * (height - 10) - 5;
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.stroke();
+
+    // Draw point at latest value
+    const lastIndex = DATA_POINTS.length - 1;
+    const lastX = direction === 'rtl' ? 0 : width;
+    const lastY =
+      height - ((DATA_POINTS[lastIndex] - minVal) / range) * (height - 10) - 5;
+    ctx.beginPath();
+    ctx.arc(lastX, lastY, 4, 0, Math.PI * 2);
+    ctx.fillStyle = '#0064e0';
+    ctx.fill();
+  }, [direction]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={200}
+      height={60}
+      data-testid="sparkline-canvas"
+      data-direction={direction}
+      style={{border: '1px solid #e1e4e8', borderRadius: 4}}
+    />
+  );
+}
+
+export default function UseDirectionHookUsage() {
+  const [lang, setLang] = useState<'en' | 'ar'>('en');
+  const isRtl = lang === 'ar';
+
+  return (
+    <InternationalizationProvider locale={lang} dir={isRtl ? 'rtl' : 'ltr'}>
+      <VStack
+        gap={4}
+        hAlign="center"
+        dir={isRtl ? 'rtl' : 'ltr'}
+        style={{width: '100%'}}>
+        <SegmentedControl
+          label="Locale"
+          value={lang}
+          onChange={next => setLang(next as 'en' | 'ar')}
+          size="sm">
+          <SegmentedControlItem value="en" label="English (LTR)" />
+          <SegmentedControlItem value="ar" label="العربية (RTL)" />
+        </SegmentedControl>
+        <Sparkline />
+      </VStack>
+    </InternationalizationProvider>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.7.13-canary.a5ad1f2",
+  "version": "0.7.13-canary.fd5cf0d",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -111,21 +111,21 @@
     "@babel/parser": "7.29.8",
     "@babel/plugin-transform-typescript": "7.29.7",
     "@babel/types": "7.29.8",
-    "@stylexjs/babel-plugin": "^0.19.0",
+    "@stylexjs/babel-plugin": "^0.19.1",
     "ast-types": "0.16.3",
     "commander": "^12.1.0",
-    "ignore": "^7.0.5",
+    "ignore": "^7.0.14",
     "jiti": "^2.7.0",
-    "jscodeshift": "^17.3.0",
-    "linkedom": "^0.18.14",
+    "jscodeshift": "^17.4.0",
+    "linkedom": "^0.18.15",
     "node-diff3": "3.2.1",
     "postcss": "^8.5.23",
     "postcss-selector-parser": "^7.1.6",
     "recast": "0.23.21",
-    "zod": "^4.4.3"
+    "zod": "^4.6.7"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.13-canary.a5ad1f2"
+    "@astryxdesign/core": "0.7.13-canary.fd5cf0d"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -133,15 +133,15 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.7.13-canary.a5ad1f2",
-    "@astryxdesign/core": "0.7.13-canary.a5ad1f2",
-    "@astryxdesign/lab": "0.7.13-canary.a5ad1f2",
-    "@astryxdesign/theme-neutral": "0.7.13-canary.a5ad1f2",
+    "@astryxdesign/charts": "0.7.13-canary.fd5cf0d",
+    "@astryxdesign/core": "0.7.13-canary.fd5cf0d",
+    "@astryxdesign/lab": "0.7.13-canary.fd5cf0d",
+    "@astryxdesign/theme-neutral": "0.7.13-canary.fd5cf0d",
     "@heroicons/react": "^2.2.0",
-    "@stylexjs/stylex": "^0.19.0",
+    "@stylexjs/stylex": "^0.19.1",
     "@types/babel__core": "^7.20.5",
-    "lucide-react": "^1.18.0",
-    "recharts": "^3.9.2"
+    "lucide-react": "^1.66.0",
+    "recharts": "^3.10.1"
   },
   "scripts": {
     "api:report": "node ../../scripts/api-report/cli.mjs --package .",