31:T24d7,sleepScheduleReactComponent = (initialBedTime, initialWakeTime) => render( // Claude Artifact Code goes below () => { const [bedTime, setBedTime] = useState(initialBedTime); const [wakeTime, setWakeTime] = useState(initialWakeTime); const [isDragging, setIsDragging] = useState(false); const [activeHandle, setActiveHandle] = useState(null); const [duration, setDuration] = useState(0); const [overall, setOverall] = useObservableState({ initialBedTime, initialWakeTime, duration: 0 }); const calculateSleepDuration = () => { let hours = wakeTime.hours - bedTime.hours; let minutes = wakeTime.minutes - bedTime.minutes; if (hours < 0) hours += 24; if (minutes < 0) { minutes += 60; hours -= 1; } return minutes > 0 ? `${hours} hr ${minutes} min` : `${hours} hr`; }; const formatTime = (time) => { return `${String(time.hours).padStart(2, "0")}:${String( time.minutes ).padStart(2, "0")}`; }; const calculateArcPath = (startAngle, endAngle) => { const radius = 140; const innerRadius = 100; let adjustedEndAngle = endAngle; let adjustedStartAngle = startAngle; // Handle angle wrapping if (endAngle < startAngle) { adjustedEndAngle += 360; } const startRad = ((adjustedStartAngle - 90) * Math.PI) / 180; const endRad = ((adjustedEndAngle - 90) * Math.PI) / 180; const x1 = 150 + radius * Math.cos(startRad); const y1 = 150 + radius * Math.sin(startRad); const x2 = 150 + radius * Math.cos(endRad); const y2 = 150 + radius * Math.sin(endRad); const x3 = 150 + innerRadius * Math.cos(endRad); const y3 = 150 + innerRadius * Math.sin(endRad); const x4 = 150 + innerRadius * Math.cos(startRad); const y4 = 150 + innerRadius * Math.sin(startRad); const largeArcFlag = adjustedEndAngle - adjustedStartAngle <= 180 ? "0" : "1"; return ` M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4} Z `; }; useEffect(() => { const calcDuration = () => { let hrs = wakeTime.hours - bedTime.hours; let mins = wakeTime.minutes - bedTime.minutes; if (hrs < 0) hrs += 24; if (mins < 0) { mins += 60; hrs -= 1; } return hrs * 60 + mins; }; const durationValue = calcDuration(); setDuration(durationValue); setOverall({ bedTime, wakeTime, duration: durationValue }); }, [bedTime, wakeTime]); const handleMouseMove = (e) => { if (!isDragging) return; const updateTimes = (newBedAngle) => { // Round to nearest 30 minutes (7.5 degrees) const snapAngle = (Math.round(newBedAngle * 2) / 2) * 15; const bedMinutes = Math.round(snapAngle * 4); const bedHrs = Math.floor(bedMinutes / 60) % 24; const bedMins = Math.round((bedMinutes % 60) / 30) * 30; const totalMinutes = bedMinutes + duration; const wakeHrs = Math.floor(totalMinutes / 60) % 24; const wakeMins = totalMinutes % 60; setBedTime({ hours: bedHrs, minutes: bedMins }); setWakeTime({ hours: wakeHrs, minutes: wakeMins }); }; const svg = e.currentTarget; const rect = svg.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; const x = e.clientX - rect.left - centerX; const y = e.clientY - rect.top - centerY; let angle = Math.atan2(y, x) * (180 / Math.PI) + 90; if (angle < 0) angle += 360; if (activeHandle === "rotate") { updateTimes(angle / 15); } else { const hours = Math.floor(angle / 15); const minutes = Math.round((angle % 15) * 4); if (activeHandle === "bed") { setBedTime({ hours, minutes }); } else if (activeHandle === "wake") { setWakeTime({ hours, minutes }); } } }; const bedAngle = (bedTime.hours * 60 + bedTime.minutes) * 0.25; const wakeAngle = (wakeTime.hours * 60 + wakeTime.minutes) * 0.25; return jsx`

<${lucideReact.Moon} size="16"/> BEDTIME

${formatTime(bedTime)}

Tonight

<${lucideReact.Sun} size=${16} /> WAKE UP - NO ALARM

${formatTime(wakeTime)}

Tomorrow

${calculateSleepDuration()}

sleep goal.

`; } )32:[] 2f:{"title":"Claude Artifact Runner","cells":[{"id":0,"value":"# Claude Artifact Runner\n\n- import React 19 from [@gnestor/react](https://observablehq.com/@gnestor/react); import `@pkg/tailwind` and `tailwind-css`; implement Shad/CN templates manually [as needed from its website](https://ui.shadcn.com/docs/components/card#installation), and provide `cn()`.\n- See [@gnestor/react-examples](https://observablehq.com/@gnestor/react-examples) for help with Observable and React 19\n- inspired by https://github.com/claudio-silva/claude-artifact-runner","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"viewof artifact = sleepScheduleReactComponent({\n hours: 23,\n minutes: 35\n }, { hours: 19, minutes: 35 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"### Your useObservableState (if needed to look into one of the useState's)","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"artifact","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"### Your Claude Provided Artifact Code:","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"### Instructions\n\nRename the variable above to match your component. Copy and paste the artifact code into render(), be sure to keep the `() => ` portion.\n\nYou will need to modify the output of Claude artifact code so that:\n- all JSX return statements have a `jsx`\\`` wrapped around them\n- Inside of a jsx tag, other React components and icons can be referenced with e.g. `<\\${lucideReact.Moon}/>`\n- If the artifact uses `shadcn` components besides ``, you'll need to [add them manually](https://ui.shadcn.com/docs/components/card#installation) to the notebook.\n- and any curly-brace props or curly-brace blocks that need to be executed should be prefixed with $, for example:\n\n~~~\n{\n}\n~~~\n\nbecomes \n\n~~~\n\\${\n}\n~~~\n\nReplace useState with `useObservableState` to get a single value exposed back to ObservableHQ.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import {\n jsx,\n React,\n useObservableState,\n render,\n useState,\n useEffect\n} from \"@gnestor/react\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { tailwindStyles as styles } from \"@hastebrot/hello-tailwind-css\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"clsx = require(\"clsx\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"twMerge = import(\"https://cdn.skypack.dev/tailwind-merge@2.6.0?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"// import { clsx } from \"clsx\"\n// import { twMerge } from \"tailwind-merge\"\n\nfunction cn(...inputs) {\n return twMerge(clsx(inputs));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"Card = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"CardHeader = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"CardTitle = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"CardDescription = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"CardContent = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx`

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"CardFooter = React.forwardRef(\n ({ className, ...props }, ref) =>\n jsx``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"import { tailwind } from \"@pkg/tailwind\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"tailwind","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"lucideReact = import(\"https://cdn.jsdelivr.net/npm/lucide-react@latest/+esm\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}